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
+17
View File
@@ -0,0 +1,17 @@
import { SFCWithInstall } from "../../utils/vue/typescript.js";
import "../../utils/index.js";
import { Effect, PopperEffect, PopperInstance, PopperProps, PopperPropsPublic, PopperTrigger, UsePopperProps, popperProps, roleTypes, usePopperProps } from "./src/popper.js";
import { ElPopperContentInjectionContext, ElPopperInjectionContext, Measurable, POPPER_CONTENT_INJECTION_KEY, POPPER_INJECTION_KEY } from "./src/constants.js";
import { _default as _default$3 } from "./src/popper.vue.js";
import { _default } from "./src/arrow.vue.js";
import { ElPopperArrowTrigger, PopperTriggerInstance, PopperTriggerProps, popperTriggerProps, usePopperTriggerProps } from "./src/trigger.js";
import { _default as _default$2 } from "./src/trigger.vue.js";
import { ElPopperArrowInstance, PopperArrowInstance, PopperArrowProps, PopperArrowPropsPublic, UsePopperArrowProps, popperArrowProps, popperArrowPropsDefaults, usePopperArrowProps } from "./src/arrow.js";
import { CreatePopperInstanceParams, ElPopperArrowContent, PopperContentEmits, PopperContentInstance, PopperContentProps, PopperContentPropsPublic, PopperCoreConfigProps, PopperCoreConfigPropsPublic, UsePopperContentProps, UsePopperCoreConfigProps, popperContentEmits, popperContentProps, popperContentPropsDefaults, popperCoreConfigProps, popperCoreConfigPropsDefaults, usePopperContentEmits, usePopperContentProps, usePopperCoreConfigProps } from "./src/content.js";
import { _default as _default$1 } from "./src/content.vue.js";
import { Options, Placement } from "@popperjs/core";
//#region ../../packages/components/popper/index.d.ts
declare const ElPopper: SFCWithInstall<typeof _default$3>;
//#endregion
export { CreatePopperInstanceParams, Effect, ElPopper, ElPopper as default, _default as ElPopperArrow, ElPopperArrowContent, ElPopperArrowInstance, ElPopperArrowTrigger, _default$1 as ElPopperContent, ElPopperContentInjectionContext, ElPopperInjectionContext, _default$2 as ElPopperTrigger, Measurable, type Options, POPPER_CONTENT_INJECTION_KEY, POPPER_INJECTION_KEY, type Placement, PopperArrowInstance, PopperArrowProps, PopperArrowPropsPublic, PopperContentEmits, PopperContentInstance, PopperContentProps, PopperContentPropsPublic, PopperCoreConfigProps, PopperCoreConfigPropsPublic, PopperEffect, PopperInstance, PopperProps, PopperPropsPublic, PopperTrigger, PopperTriggerInstance, PopperTriggerProps, UsePopperArrowProps, UsePopperContentProps, UsePopperCoreConfigProps, UsePopperProps, popperArrowProps, popperArrowPropsDefaults, popperContentEmits, popperContentProps, popperContentPropsDefaults, popperCoreConfigProps, popperCoreConfigPropsDefaults, popperProps, popperTriggerProps, roleTypes, usePopperArrowProps, usePopperContentEmits, usePopperContentProps, usePopperCoreConfigProps, usePopperProps, usePopperTriggerProps };
+41
View File
@@ -0,0 +1,41 @@
Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: 'Module' } });
const require_install = require('../../utils/vue/install.js');
const require_popper = require('./src/popper.js');
const require_constants = require('./src/constants.js');
const require_popper$1 = require('./src/popper2.js');
const require_arrow = require('./src/arrow2.js');
const require_trigger = require('./src/trigger.js');
const require_trigger$1 = require('./src/trigger2.js');
const require_arrow$1 = require('./src/arrow.js');
const require_content = require('./src/content.js');
const require_content$1 = require('./src/content2.js');
//#region ../../packages/components/popper/index.ts
const ElPopper = require_install.withInstall(require_popper$1.default);
//#endregion
exports.Effect = require_popper.Effect;
exports.ElPopper = ElPopper;
exports.default = ElPopper;
exports.ElPopperArrow = require_arrow.default;
exports.ElPopperContent = require_content$1.default;
exports.ElPopperTrigger = require_trigger$1.default;
exports.POPPER_CONTENT_INJECTION_KEY = require_constants.POPPER_CONTENT_INJECTION_KEY;
exports.POPPER_INJECTION_KEY = require_constants.POPPER_INJECTION_KEY;
exports.popperArrowProps = require_arrow$1.popperArrowProps;
exports.popperArrowPropsDefaults = require_arrow$1.popperArrowPropsDefaults;
exports.popperContentEmits = require_content.popperContentEmits;
exports.popperContentProps = require_content.popperContentProps;
exports.popperContentPropsDefaults = require_content.popperContentPropsDefaults;
exports.popperCoreConfigProps = require_content.popperCoreConfigProps;
exports.popperCoreConfigPropsDefaults = require_content.popperCoreConfigPropsDefaults;
exports.popperProps = require_popper.popperProps;
exports.popperTriggerProps = require_trigger.popperTriggerProps;
exports.roleTypes = require_popper.roleTypes;
exports.usePopperArrowProps = require_arrow$1.usePopperArrowProps;
exports.usePopperContentEmits = require_content.usePopperContentEmits;
exports.usePopperContentProps = require_content.usePopperContentProps;
exports.usePopperCoreConfigProps = require_content.usePopperCoreConfigProps;
exports.usePopperProps = require_popper.usePopperProps;
exports.usePopperTriggerProps = require_trigger.usePopperTriggerProps;
//# sourceMappingURL=index.js.map
@@ -0,0 +1 @@
{"version":3,"file":"index.js","names":["withInstall","Popper"],"sources":["../../../../../packages/components/popper/index.ts"],"sourcesContent":["import { withInstall } from '@element-plus/utils'\nimport Popper from './src/popper.vue'\nimport ElPopperArrow from './src/arrow.vue'\nimport ElPopperTrigger from './src/trigger.vue'\nimport ElPopperContent from './src/content.vue'\n\nimport type { SFCWithInstall } from '@element-plus/utils'\n\nexport { ElPopperArrow, ElPopperTrigger, ElPopperContent }\n\nexport const ElPopper: SFCWithInstall<typeof Popper> = withInstall(Popper)\nexport default ElPopper\n\nexport * from './src/popper'\nexport * from './src/trigger'\nexport * from './src/content'\nexport * from './src/arrow'\nexport * from './src/constants'\n\nexport type { Placement, Options } from '@popperjs/core'\n"],"mappings":";;;;;;;;;;;;;AAUA,MAAa,WAA0CA,4BAAYC,yBAAO"}
@@ -0,0 +1,36 @@
import { EpPropFinalized } from "../../../utils/vue/props/types.js";
import "../../../utils/index.js";
import { _default } from "./arrow.vue.js";
import { ExtractPublicPropTypes } from "vue";
//#region ../../packages/components/popper/src/arrow.d.ts
interface PopperArrowProps {
/**
* @description arrow offset
*/
arrowOffset?: number;
}
/**
* @deprecated Removed after 3.0.0, Use `PopperArrowProps` instead.
*/
declare const popperArrowProps: {
readonly arrowOffset: EpPropFinalized<NumberConstructor, unknown, unknown, 5, boolean>;
};
/**
* @deprecated Removed after 3.0.0, Use `PopperArrowProps` instead.
*/
type PopperArrowPropsPublic = ExtractPublicPropTypes<typeof popperArrowProps>;
declare const popperArrowPropsDefaults: {
readonly arrowOffset: 5;
};
type PopperArrowInstance = InstanceType<typeof _default> & unknown;
/** @deprecated use `popperArrowProps` instead, and it will be deprecated in the next major version */
declare const usePopperArrowProps: {
readonly arrowOffset: EpPropFinalized<NumberConstructor, unknown, unknown, 5, boolean>;
};
/** @deprecated use `PopperArrowProps` instead, and it will be deprecated in the next major version */
type UsePopperArrowProps = PopperArrowProps;
/** @deprecated use `PopperArrowInstance` instead, and it will be deprecated in the next major version */
type ElPopperArrowInstance = PopperArrowInstance;
//#endregion
export { ElPopperArrowInstance, PopperArrowInstance, PopperArrowProps, PopperArrowPropsPublic, UsePopperArrowProps, popperArrowProps, popperArrowPropsDefaults, usePopperArrowProps };
+20
View File
@@ -0,0 +1,20 @@
Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
const require_runtime = require('../../../utils/vue/props/runtime.js');
//#region ../../packages/components/popper/src/arrow.ts
/**
* @deprecated Removed after 3.0.0, Use `PopperArrowProps` instead.
*/
const popperArrowProps = require_runtime.buildProps({ arrowOffset: {
type: Number,
default: 5
} });
const popperArrowPropsDefaults = { arrowOffset: 5 };
/** @deprecated use `popperArrowProps` instead, and it will be deprecated in the next major version */
const usePopperArrowProps = popperArrowProps;
//#endregion
exports.popperArrowProps = popperArrowProps;
exports.popperArrowPropsDefaults = popperArrowPropsDefaults;
exports.usePopperArrowProps = usePopperArrowProps;
//# sourceMappingURL=arrow.js.map
@@ -0,0 +1 @@
{"version":3,"file":"arrow.js","names":["buildProps"],"sources":["../../../../../../packages/components/popper/src/arrow.ts"],"sourcesContent":["import { buildProps } from '@element-plus/utils'\n\nimport type { ExtractPublicPropTypes } from 'vue'\nimport type Arrow from './arrow.vue'\n\nexport interface PopperArrowProps {\n /**\n * @description arrow offset\n */\n arrowOffset?: number\n}\n\n/**\n * @deprecated Removed after 3.0.0, Use `PopperArrowProps` instead.\n */\nexport const popperArrowProps = buildProps({\n arrowOffset: {\n type: Number,\n default: 5,\n },\n} as const)\n\n/**\n * @deprecated Removed after 3.0.0, Use `PopperArrowProps` instead.\n */\nexport type PopperArrowPropsPublic = ExtractPublicPropTypes<\n typeof popperArrowProps\n>\n\nexport const popperArrowPropsDefaults = {\n arrowOffset: 5,\n} as const\n\nexport type PopperArrowInstance = InstanceType<typeof Arrow> & unknown\n\n/** @deprecated use `popperArrowProps` instead, and it will be deprecated in the next major version */\nexport const usePopperArrowProps = popperArrowProps\n\n/** @deprecated use `PopperArrowProps` instead, and it will be deprecated in the next major version */\nexport type UsePopperArrowProps = PopperArrowProps\n\n/** @deprecated use `PopperArrowInstance` instead, and it will be deprecated in the next major version */\nexport type ElPopperArrowInstance = PopperArrowInstance\n"],"mappings":";;;;;;;AAeA,MAAa,mBAAmBA,2BAAW,EACzC,aAAa;CACX,MAAM;CACN,SAAS;CACV,EACF,CAAU;AASX,MAAa,2BAA2B,EACtC,aAAa,GACd;;AAKD,MAAa,sBAAsB"}
@@ -0,0 +1,12 @@
import * as vue from "vue";
//#region ../../packages/components/popper/src/arrow.vue.d.ts
declare const __VLS_export: vue.DefineComponent<{}, {
/**
* @description Arrow element
*/
arrowRef: vue.Ref<HTMLElement | undefined, HTMLElement | undefined>;
}, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {}, string, vue.PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, vue.ComponentProvideOptions, true, {}, any>;
declare const _default: typeof __VLS_export;
//#endregion
export { _default };
@@ -0,0 +1,32 @@
const require_runtime = require('../../../_virtual/_rolldown/runtime.js');
const require_index = require('../../../hooks/use-namespace/index.js');
const require_constants = require('./constants.js');
let vue = require("vue");
//#region ../../packages/components/popper/src/arrow.vue?vue&type=script&setup=true&lang.ts
var arrow_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ (0, vue.defineComponent)({
name: "ElPopperArrow",
inheritAttrs: false,
__name: "arrow",
setup(__props, { expose: __expose }) {
const ns = require_index.useNamespace("popper");
const { arrowRef, arrowStyle } = (0, vue.inject)(require_constants.POPPER_CONTENT_INJECTION_KEY, void 0);
(0, vue.onBeforeUnmount)(() => {
arrowRef.value = void 0;
});
__expose({ arrowRef });
return (_ctx, _cache) => {
return (0, vue.openBlock)(), (0, vue.createElementBlock)("span", {
ref_key: "arrowRef",
ref: arrowRef,
class: (0, vue.normalizeClass)((0, vue.unref)(ns).e("arrow")),
style: (0, vue.normalizeStyle)((0, vue.unref)(arrowStyle)),
"data-popper-arrow": ""
}, null, 6);
};
}
});
//#endregion
exports.default = arrow_vue_vue_type_script_setup_true_lang_default;
//# sourceMappingURL=arrow.vue_vue_type_script_setup_true_lang.js.map
@@ -0,0 +1 @@
{"version":3,"file":"arrow.vue_vue_type_script_setup_true_lang.js","names":[],"sources":["../../../../../../packages/components/popper/src/arrow.vue"],"sourcesContent":["<template>\n <span\n ref=\"arrowRef\"\n :class=\"ns.e('arrow')\"\n :style=\"arrowStyle\"\n data-popper-arrow\n />\n</template>\n\n<script lang=\"ts\" setup>\nimport { inject, onBeforeUnmount } from 'vue'\nimport { useNamespace } from '@element-plus/hooks'\nimport { POPPER_CONTENT_INJECTION_KEY } from './constants'\n\ndefineOptions({\n name: 'ElPopperArrow',\n inheritAttrs: false,\n})\n\nconst ns = useNamespace('popper')\nconst { arrowRef, arrowStyle } = inject(\n POPPER_CONTENT_INJECTION_KEY,\n undefined\n)!\n\nonBeforeUnmount(() => {\n arrowRef.value = undefined\n})\n\ndefineExpose({\n /**\n * @description Arrow element\n */\n arrowRef,\n})\n</script>\n"],"mappings":";;;;;;;;;;;EAmBA,MAAM,KAAK,2BAAa,SAAQ;EAChC,MAAM,EAAE,UAAU,+BAChB,gDACA,OACD;AAED,iCAAsB;AACpB,YAAS,QAAQ;IAClB;AAED,WAAa,EAIX,UACD,CAAA;;4DA5BG,QAAA;aAJI;IAAJ,KAAI;IACH,8CAAO,GAAE,CAAC,EAAC,QAAA,CAAA;IACX,8CAAO,WAAU,CAAA;IAClB,qBAAA"}
@@ -0,0 +1,9 @@
Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: 'Module' } });
const require_arrow_vue_vue_type_script_setup_true_lang = require('./arrow.vue_vue_type_script_setup_true_lang.js');
//#region ../../packages/components/popper/src/arrow.vue
var arrow_default = require_arrow_vue_vue_type_script_setup_true_lang.default;
//#endregion
exports.default = arrow_default;
//# sourceMappingURL=arrow2.js.map
@@ -0,0 +1 @@
{"version":3,"file":"arrow2.js","names":[],"sources":["../../../../../../packages/components/popper/src/arrow.vue"],"sourcesContent":["<template>\n <span\n ref=\"arrowRef\"\n :class=\"ns.e('arrow')\"\n :style=\"arrowStyle\"\n data-popper-arrow\n />\n</template>\n\n<script lang=\"ts\" setup>\nimport { inject, onBeforeUnmount } from 'vue'\nimport { useNamespace } from '@element-plus/hooks'\nimport { POPPER_CONTENT_INJECTION_KEY } from './constants'\n\ndefineOptions({\n name: 'ElPopperArrow',\n inheritAttrs: false,\n})\n\nconst ns = useNamespace('popper')\nconst { arrowRef, arrowStyle } = inject(\n POPPER_CONTENT_INJECTION_KEY,\n undefined\n)!\n\nonBeforeUnmount(() => {\n arrowRef.value = undefined\n})\n\ndefineExpose({\n /**\n * @description Arrow element\n */\n arrowRef,\n})\n</script>\n"],"mappings":""}
@@ -0,0 +1,4 @@
import { UsePopperContentReturn, usePopperContent } from "./use-content.js";
import { UsePopperContentDOMReturn, usePopperContentDOM } from "./use-content-dom.js";
import { UsePopperContentFocusTrapReturn, usePopperContentFocusTrap } from "./use-focus-trap.js";
export { UsePopperContentDOMReturn, UsePopperContentFocusTrapReturn, UsePopperContentReturn, usePopperContent, usePopperContentDOM, usePopperContentFocusTrap };
@@ -0,0 +1,8 @@
Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
const require_use_content = require('./use-content.js');
const require_use_content_dom = require('./use-content-dom.js');
const require_use_focus_trap = require('./use-focus-trap.js');
exports.usePopperContent = require_use_content.usePopperContent;
exports.usePopperContentDOM = require_use_content_dom.usePopperContentDOM;
exports.usePopperContentFocusTrap = require_use_focus_trap.usePopperContentFocusTrap;
@@ -0,0 +1,50 @@
import { UsePopperReturn } from "../../../../hooks/use-popper/index.js";
import "../../../../hooks/index.js";
import { PopperContentProps } from "../content.js";
import { UsePopperContentReturn } from "./use-content.js";
import * as vue from "vue";
import { CSSProperties, StyleValue } from "vue";
//#region ../../packages/components/popper/src/composables/use-content-dom.d.ts
declare const usePopperContentDOM: (props: PopperContentProps, {
attributes,
styles,
role
}: Pick<UsePopperReturn, "attributes" | "styles"> & Pick<UsePopperContentReturn, "role">) => {
ariaModal: vue.ComputedRef<string | undefined>;
arrowStyle: vue.ComputedRef<CSSProperties>;
contentAttrs: vue.ComputedRef<{
[key: string]: string | boolean;
}>;
contentClass: vue.ComputedRef<((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)[])[])[])[])[])[])[])[])[])[])[]) | undefined)[]>;
contentStyle: vue.ComputedRef<StyleValue[]>;
contentZIndex: vue.Ref<number, number>;
updateZIndex: () => void;
};
type UsePopperContentDOMReturn = ReturnType<typeof usePopperContentDOM>;
//#endregion
export { UsePopperContentDOMReturn, usePopperContentDOM };
@@ -0,0 +1,45 @@
Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
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-z-index/index.js');
let vue = require("vue");
//#region ../../packages/components/popper/src/composables/use-content-dom.ts
const usePopperContentDOM = (props, { attributes, styles, role }) => {
const { nextZIndex } = require_index$1.useZIndex();
const ns = require_index.useNamespace("popper");
const contentAttrs = (0, vue.computed)(() => (0, vue.unref)(attributes).popper);
const contentZIndex = (0, vue.ref)(require_types.isNumber(props.zIndex) ? props.zIndex : nextZIndex());
const contentClass = (0, vue.computed)(() => [
ns.b(),
ns.is("pure", props.pure),
ns.is(props.effect),
props.popperClass
]);
const contentStyle = (0, vue.computed)(() => {
return [
{ zIndex: (0, vue.unref)(contentZIndex) },
(0, vue.unref)(styles).popper,
props.popperStyle || {}
];
});
const ariaModal = (0, vue.computed)(() => role.value === "dialog" ? "false" : void 0);
const arrowStyle = (0, vue.computed)(() => (0, vue.unref)(styles).arrow || {});
const updateZIndex = () => {
contentZIndex.value = require_types.isNumber(props.zIndex) ? props.zIndex : nextZIndex();
};
return {
ariaModal,
arrowStyle,
contentAttrs,
contentClass,
contentStyle,
contentZIndex,
updateZIndex
};
};
//#endregion
exports.usePopperContentDOM = usePopperContentDOM;
//# sourceMappingURL=use-content-dom.js.map
@@ -0,0 +1 @@
{"version":3,"file":"use-content-dom.js","names":["useZIndex","useNamespace","isNumber"],"sources":["../../../../../../../packages/components/popper/src/composables/use-content-dom.ts"],"sourcesContent":["import { computed, ref, unref } from 'vue'\nimport { useNamespace, useZIndex } from '@element-plus/hooks'\nimport { isNumber } from '@element-plus/utils'\n\nimport type { CSSProperties, StyleValue } from 'vue'\nimport type { UsePopperReturn } from '@element-plus/hooks'\nimport type { UsePopperContentReturn } from './use-content'\nimport type { PopperContentProps } from '../content'\n\nexport const usePopperContentDOM = (\n props: PopperContentProps,\n {\n attributes,\n styles,\n role,\n }: Pick<UsePopperReturn, 'attributes' | 'styles'> &\n Pick<UsePopperContentReturn, 'role'>\n) => {\n const { nextZIndex } = useZIndex()\n const ns = useNamespace('popper')\n\n const contentAttrs = computed(() => unref(attributes).popper)\n const contentZIndex = ref<number>(\n isNumber(props.zIndex) ? props.zIndex : nextZIndex()\n )\n const contentClass = computed(() => [\n ns.b(),\n ns.is('pure', props.pure),\n ns.is(props.effect!),\n props.popperClass,\n ])\n const contentStyle = computed<StyleValue[]>(() => {\n return [\n { zIndex: unref(contentZIndex) } as CSSProperties,\n unref(styles).popper as CSSProperties,\n props.popperStyle || {},\n ]\n })\n const ariaModal = computed<string | undefined>(() =>\n role.value === 'dialog' ? 'false' : undefined\n )\n const arrowStyle = computed(\n () => (unref(styles).arrow || {}) as CSSProperties\n )\n\n const updateZIndex = () => {\n contentZIndex.value = isNumber(props.zIndex) ? props.zIndex : nextZIndex()\n }\n\n return {\n ariaModal,\n arrowStyle,\n contentAttrs,\n contentClass,\n contentStyle,\n contentZIndex,\n\n updateZIndex,\n }\n}\n\nexport type UsePopperContentDOMReturn = ReturnType<typeof usePopperContentDOM>\n"],"mappings":";;;;;;;;AASA,MAAa,uBACX,OACA,EACE,YACA,QACA,WAGC;CACH,MAAM,EAAE,eAAeA,2BAAW;CAClC,MAAM,KAAKC,2BAAa,SAAS;CAEjC,MAAM,sDAAoC,WAAW,CAAC,OAAO;CAC7D,MAAM,6BACJC,uBAAS,MAAM,OAAO,GAAG,MAAM,SAAS,YAAY,CACrD;CACD,MAAM,uCAA8B;EAClC,GAAG,GAAG;EACN,GAAG,GAAG,QAAQ,MAAM,KAAK;EACzB,GAAG,GAAG,MAAM,OAAQ;EACpB,MAAM;EACP,CAAC;CACF,MAAM,uCAA4C;AAChD,SAAO;GACL,EAAE,uBAAc,cAAc,EAAE;kBAC1B,OAAO,CAAC;GACd,MAAM,eAAe,EAAE;GACxB;GACD;CACF,MAAM,oCACJ,KAAK,UAAU,WAAW,UAAU,OACrC;CACD,MAAM,oDACS,OAAO,CAAC,SAAS,EAAE,CACjC;CAED,MAAM,qBAAqB;AACzB,gBAAc,QAAQA,uBAAS,MAAM,OAAO,GAAG,MAAM,SAAS,YAAY;;AAG5E,QAAO;EACL;EACA;EACA;EACA;EACA;EACA;EAEA;EACD"}
@@ -0,0 +1,83 @@
import { PopperContentProps } from "../content.js";
import * as vue from "vue";
import * as _popperjs_core0 from "@popperjs/core";
import { Modifier } from "@popperjs/core";
//#region ../../packages/components/popper/src/composables/use-content.d.ts
declare const usePopperContent: (props: PopperContentProps) => {
attributes: vue.ComputedRef<{
[key: string]: {
[key: string]: string | boolean;
};
}>;
arrowRef: vue.Ref<HTMLElement | undefined, HTMLElement | undefined>;
contentRef: vue.Ref<HTMLElement | undefined, HTMLElement | undefined>;
instanceRef: vue.ComputedRef<_popperjs_core0.Instance | undefined>;
state: vue.ComputedRef<{
elements?: {
reference: Element | _popperjs_core0.VirtualElement;
popper: HTMLElement;
arrow?: HTMLElement;
} | undefined;
options?: _popperjs_core0.OptionsGeneric<any> | undefined;
placement?: _popperjs_core0.Placement | undefined;
strategy?: _popperjs_core0.PositioningStrategy | undefined;
orderedModifiers?: Modifier<any, any>[] | undefined;
rects?: _popperjs_core0.StateRects | undefined;
scrollParents?: {
reference: Array<Element | _popperjs_core0.Window | _popperjs_core0.VisualViewport>;
popper: Array<Element | _popperjs_core0.Window | _popperjs_core0.VisualViewport>;
} | undefined;
styles?: {
[key: string]: Partial<CSSStyleDeclaration>;
} | undefined;
attributes?: {
[key: string]: {
[key: string]: string | boolean;
};
} | undefined;
modifiersData?: {
[key: string]: any;
arrow?: {
x?: number;
y?: number;
centerOffset: number;
};
hide?: {
isReferenceHidden: boolean;
hasPopperEscaped: boolean;
referenceClippingOffsets: _popperjs_core0.SideObject;
popperEscapeOffsets: _popperjs_core0.SideObject;
};
offset?: {
top?: _popperjs_core0.Offsets | undefined;
auto?: _popperjs_core0.Offsets | undefined;
bottom?: _popperjs_core0.Offsets | undefined;
left?: _popperjs_core0.Offsets | undefined;
right?: _popperjs_core0.Offsets | undefined;
"auto-start"?: _popperjs_core0.Offsets | undefined;
"auto-end"?: _popperjs_core0.Offsets | undefined;
"top-start"?: _popperjs_core0.Offsets | undefined;
"top-end"?: _popperjs_core0.Offsets | undefined;
"bottom-start"?: _popperjs_core0.Offsets | undefined;
"bottom-end"?: _popperjs_core0.Offsets | undefined;
"right-start"?: _popperjs_core0.Offsets | undefined;
"right-end"?: _popperjs_core0.Offsets | undefined;
"left-start"?: _popperjs_core0.Offsets | undefined;
"left-end"?: _popperjs_core0.Offsets | undefined;
};
preventOverflow?: _popperjs_core0.Offsets;
popperOffsets?: _popperjs_core0.Offsets;
} | undefined;
reset?: boolean | undefined;
}>;
styles: vue.ComputedRef<{
[key: string]: Partial<CSSStyleDeclaration>;
}>;
role: vue.ComputedRef<string>;
forceUpdate: () => void | undefined;
update: () => Promise<Partial<_popperjs_core0.State>> | undefined;
};
type UsePopperContentReturn = ReturnType<typeof usePopperContent>;
//#endregion
export { UsePopperContentReturn, usePopperContent };
@@ -0,0 +1,76 @@
Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
const require_runtime = require('../../../../_virtual/_rolldown/runtime.js');
const require_index = require('../../../../hooks/use-popper/index.js');
const require_constants = require('../constants.js');
const require_utils = require('../utils.js');
let _vueuse_core = require("@vueuse/core");
let lodash_unified = require("lodash-unified");
let vue = require("vue");
//#region ../../packages/components/popper/src/composables/use-content.ts
const DEFAULT_ARROW_OFFSET = 0;
const usePopperContent = (props) => {
const { popperInstanceRef, contentRef, triggerRef, role } = (0, vue.inject)(require_constants.POPPER_INJECTION_KEY, void 0);
const arrowRef = (0, vue.ref)();
const arrowOffset = (0, vue.computed)(() => props.arrowOffset);
const eventListenerModifier = (0, vue.computed)(() => {
return {
name: "eventListeners",
enabled: !!props.visible
};
});
const arrowModifier = (0, vue.computed)(() => {
const arrowEl = (0, vue.unref)(arrowRef);
const offset = (0, vue.unref)(arrowOffset) ?? DEFAULT_ARROW_OFFSET;
return {
name: "arrow",
enabled: !(0, lodash_unified.isUndefined)(arrowEl),
options: {
element: arrowEl,
padding: offset
}
};
});
const options = (0, vue.computed)(() => {
return {
onFirstUpdate: () => {
update();
},
...require_utils.buildPopperOptions(props, [(0, vue.unref)(arrowModifier), (0, vue.unref)(eventListenerModifier)])
};
});
const computedReference = (0, vue.computed)(() => require_utils.unwrapMeasurableEl(props.referenceEl) || (0, vue.unref)(triggerRef));
const { attributes, state, styles, update, forceUpdate, instanceRef } = require_index.usePopper(computedReference, contentRef, options);
(0, vue.watch)(instanceRef, (instance) => popperInstanceRef.value = instance, { flush: "sync" });
(0, vue.onMounted)(() => {
(0, vue.watch)(() => (0, vue.unref)(computedReference)?.getBoundingClientRect?.(), () => {
update();
});
});
let stopResizeObserver;
(0, vue.watch)(() => props.visible, (visible) => {
stopResizeObserver?.();
stopResizeObserver = void 0;
if (visible) stopResizeObserver = (0, _vueuse_core.useResizeObserver)(contentRef, update).stop;
});
(0, vue.onBeforeUnmount)(() => {
popperInstanceRef.value = void 0;
stopResizeObserver?.();
stopResizeObserver = void 0;
});
return {
attributes,
arrowRef,
contentRef,
instanceRef,
state,
styles,
role,
forceUpdate,
update
};
};
//#endregion
exports.usePopperContent = usePopperContent;
//# sourceMappingURL=use-content.js.map
@@ -0,0 +1 @@
{"version":3,"file":"use-content.js","names":["POPPER_INJECTION_KEY","buildPopperOptions","unwrapMeasurableEl","usePopper"],"sources":["../../../../../../../packages/components/popper/src/composables/use-content.ts"],"sourcesContent":["import {\n computed,\n inject,\n onBeforeUnmount,\n onMounted,\n ref,\n unref,\n watch,\n} from 'vue'\nimport { useResizeObserver } from '@vueuse/core'\nimport { isUndefined } from 'lodash-unified'\nimport { usePopper } from '@element-plus/hooks'\nimport { POPPER_INJECTION_KEY } from '../constants'\nimport { buildPopperOptions, unwrapMeasurableEl } from '../utils'\n\nimport type { Modifier } from '@popperjs/core'\nimport type { PartialOptions } from '@element-plus/hooks'\nimport type { PopperContentProps } from '../content'\n\nconst DEFAULT_ARROW_OFFSET = 0\n\nexport const usePopperContent = (props: PopperContentProps) => {\n const { popperInstanceRef, contentRef, triggerRef, role } = inject(\n POPPER_INJECTION_KEY,\n undefined\n )!\n\n const arrowRef = ref<HTMLElement>()\n const arrowOffset = computed(() => props.arrowOffset)\n\n const eventListenerModifier = computed(() => {\n return {\n name: 'eventListeners',\n enabled: !!props.visible,\n } as Modifier<'eventListeners', any>\n })\n\n const arrowModifier = computed(() => {\n const arrowEl = unref(arrowRef)\n const offset = unref(arrowOffset) ?? DEFAULT_ARROW_OFFSET\n // Seems like the `phase` and `fn` is required by Modifier type\n // But on its documentation they didn't specify that.\n // Refer to https://popper.js.org/docs/v2/modifiers/arrow/\n return {\n name: 'arrow',\n enabled: !isUndefined(arrowEl),\n options: {\n element: arrowEl,\n padding: offset,\n },\n } as any\n })\n\n const options = computed<PartialOptions>(() => {\n return {\n onFirstUpdate: () => {\n update()\n },\n ...buildPopperOptions(props, [\n unref(arrowModifier),\n unref(eventListenerModifier),\n ]),\n }\n })\n\n const computedReference = computed(\n () => unwrapMeasurableEl(props.referenceEl) || unref(triggerRef)\n )\n\n const { attributes, state, styles, update, forceUpdate, instanceRef } =\n usePopper(computedReference, contentRef, options)\n\n watch(instanceRef, (instance) => (popperInstanceRef.value = instance), {\n flush: 'sync',\n })\n\n onMounted(() => {\n watch(\n () => unref(computedReference)?.getBoundingClientRect?.(),\n () => {\n update()\n }\n )\n })\n\n // todo: Replace with onCleanup when vue in peerDependencies is ^3.5.0.\n let stopResizeObserver: (() => void) | undefined\n watch(\n () => props.visible,\n (visible) => {\n stopResizeObserver?.()\n stopResizeObserver = undefined\n if (visible) {\n stopResizeObserver = useResizeObserver(contentRef, update).stop\n }\n }\n )\n\n onBeforeUnmount(() => {\n popperInstanceRef.value = undefined\n stopResizeObserver?.()\n stopResizeObserver = undefined\n })\n\n return {\n attributes,\n arrowRef,\n contentRef,\n instanceRef,\n state,\n styles,\n role,\n\n forceUpdate,\n update,\n }\n}\n\nexport type UsePopperContentReturn = ReturnType<typeof usePopperContent>\n"],"mappings":";;;;;;;;;;AAmBA,MAAM,uBAAuB;AAE7B,MAAa,oBAAoB,UAA8B;CAC7D,MAAM,EAAE,mBAAmB,YAAY,YAAY,yBACjDA,wCACA,OACD;CAED,MAAM,yBAA6B;CACnC,MAAM,sCAA6B,MAAM,YAAY;CAErD,MAAM,gDAAuC;AAC3C,SAAO;GACL,MAAM;GACN,SAAS,CAAC,CAAC,MAAM;GAClB;GACD;CAEF,MAAM,wCAA+B;EACnC,MAAM,yBAAgB,SAAS;EAC/B,MAAM,wBAAe,YAAY,IAAI;AAIrC,SAAO;GACL,MAAM;GACN,SAAS,iCAAa,QAAQ;GAC9B,SAAS;IACP,SAAS;IACT,SAAS;IACV;GACF;GACD;CAEF,MAAM,kCAAyC;AAC7C,SAAO;GACL,qBAAqB;AACnB,YAAQ;;GAEV,GAAGC,iCAAmB,OAAO,gBACrB,cAAc,iBACd,sBAAsB,CAC7B,CAAC;GACH;GACD;CAEF,MAAM,4CACEC,iCAAmB,MAAM,YAAY,mBAAU,WAAW,CACjE;CAED,MAAM,EAAE,YAAY,OAAO,QAAQ,QAAQ,aAAa,gBACtDC,wBAAU,mBAAmB,YAAY,QAAQ;AAEnD,gBAAM,cAAc,aAAc,kBAAkB,QAAQ,UAAW,EACrE,OAAO,QACR,CAAC;AAEF,0BAAgB;AACd,sCACc,kBAAkB,EAAE,yBAAyB,QACnD;AACJ,WAAQ;IAEX;GACD;CAGF,IAAI;AACJ,sBACQ,MAAM,UACX,YAAY;AACX,wBAAsB;AACtB,uBAAqB;AACrB,MAAI,QACF,0DAAuC,YAAY,OAAO,CAAC;GAGhE;AAED,gCAAsB;AACpB,oBAAkB,QAAQ;AAC1B,wBAAsB;AACtB,uBAAqB;GACrB;AAEF,QAAO;EACL;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;EACA;EACD"}
@@ -0,0 +1,17 @@
import { PopperContentEmits, PopperContentProps } from "../content.js";
import * as vue from "vue";
import { SetupContext } from "vue";
//#region ../../packages/components/popper/src/composables/use-focus-trap.d.ts
declare const usePopperContentFocusTrap: (props: PopperContentProps, emit: SetupContext<PopperContentEmits>["emit"]) => {
focusStartRef: vue.Ref<HTMLElement | "first" | "container" | undefined, HTMLElement | "first" | "container" | undefined>;
trapped: vue.Ref<boolean, boolean>;
onFocusAfterReleased: (event: CustomEvent) => void;
onFocusAfterTrapped: () => void;
onFocusInTrap: (event: FocusEvent) => void;
onFocusoutPrevented: (event: CustomEvent) => void;
onReleaseRequested: () => void;
};
type UsePopperContentFocusTrapReturn = ReturnType<typeof usePopperContentFocusTrap>;
//#endregion
export { UsePopperContentFocusTrapReturn, usePopperContentFocusTrap };
@@ -0,0 +1,50 @@
Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
const require_runtime = require('../../../../_virtual/_rolldown/runtime.js');
let vue = require("vue");
//#region ../../packages/components/popper/src/composables/use-focus-trap.ts
const usePopperContentFocusTrap = (props, emit) => {
const trapped = (0, vue.ref)(false);
const focusStartRef = (0, vue.ref)();
const onFocusAfterTrapped = () => {
emit("focus");
};
const onFocusAfterReleased = (event) => {
if (event.detail?.focusReason !== "pointer") {
focusStartRef.value = "first";
emit("blur");
}
};
const onFocusInTrap = (event) => {
if (props.visible && !trapped.value) {
if (event.target) focusStartRef.value = event.target;
trapped.value = true;
}
};
const onFocusoutPrevented = (event) => {
if (!props.trapping) {
if (event.detail.focusReason === "pointer") event.preventDefault();
trapped.value = false;
}
};
const onReleaseRequested = () => {
trapped.value = false;
emit("close");
};
(0, vue.onBeforeUnmount)(() => {
focusStartRef.value = void 0;
});
return {
focusStartRef,
trapped,
onFocusAfterReleased,
onFocusAfterTrapped,
onFocusInTrap,
onFocusoutPrevented,
onReleaseRequested
};
};
//#endregion
exports.usePopperContentFocusTrap = usePopperContentFocusTrap;
//# sourceMappingURL=use-focus-trap.js.map
@@ -0,0 +1 @@
{"version":3,"file":"use-focus-trap.js","names":[],"sources":["../../../../../../../packages/components/popper/src/composables/use-focus-trap.ts"],"sourcesContent":["import { onBeforeUnmount, ref } from 'vue'\n\nimport type { SetupContext } from 'vue'\nimport type { PopperContentEmits, PopperContentProps } from '../content'\n\nexport const usePopperContentFocusTrap = (\n props: PopperContentProps,\n emit: SetupContext<PopperContentEmits>['emit']\n) => {\n const trapped = ref(false)\n const focusStartRef = ref<'container' | 'first' | HTMLElement>()\n\n const onFocusAfterTrapped = () => {\n emit('focus')\n }\n\n const onFocusAfterReleased = (event: CustomEvent) => {\n if (event.detail?.focusReason !== 'pointer') {\n focusStartRef.value = 'first'\n emit('blur')\n }\n }\n\n const onFocusInTrap = (event: FocusEvent) => {\n if (props.visible && !trapped.value) {\n if (event.target) {\n focusStartRef.value = event.target as typeof focusStartRef.value\n }\n trapped.value = true\n }\n }\n\n const onFocusoutPrevented = (event: CustomEvent) => {\n if (!props.trapping) {\n if (event.detail.focusReason === 'pointer') {\n event.preventDefault()\n }\n trapped.value = false\n }\n }\n\n const onReleaseRequested = () => {\n trapped.value = false\n emit('close')\n }\n\n onBeforeUnmount(() => {\n focusStartRef.value = undefined\n })\n\n return {\n focusStartRef,\n trapped,\n\n onFocusAfterReleased,\n onFocusAfterTrapped,\n onFocusInTrap,\n onFocusoutPrevented,\n onReleaseRequested,\n }\n}\n\nexport type UsePopperContentFocusTrapReturn = ReturnType<\n typeof usePopperContentFocusTrap\n>\n"],"mappings":";;;;;AAKA,MAAa,6BACX,OACA,SACG;CACH,MAAM,uBAAc,MAAM;CAC1B,MAAM,8BAA0D;CAEhE,MAAM,4BAA4B;AAChC,OAAK,QAAQ;;CAGf,MAAM,wBAAwB,UAAuB;AACnD,MAAI,MAAM,QAAQ,gBAAgB,WAAW;AAC3C,iBAAc,QAAQ;AACtB,QAAK,OAAO;;;CAIhB,MAAM,iBAAiB,UAAsB;AAC3C,MAAI,MAAM,WAAW,CAAC,QAAQ,OAAO;AACnC,OAAI,MAAM,OACR,eAAc,QAAQ,MAAM;AAE9B,WAAQ,QAAQ;;;CAIpB,MAAM,uBAAuB,UAAuB;AAClD,MAAI,CAAC,MAAM,UAAU;AACnB,OAAI,MAAM,OAAO,gBAAgB,UAC/B,OAAM,gBAAgB;AAExB,WAAQ,QAAQ;;;CAIpB,MAAM,2BAA2B;AAC/B,UAAQ,QAAQ;AAChB,OAAK,QAAQ;;AAGf,gCAAsB;AACpB,gBAAc,QAAQ;GACtB;AAEF,QAAO;EACL;EACA;EAEA;EACA;EACA;EACA;EACA;EACD"}
@@ -0,0 +1,27 @@
import { CSSProperties, ComputedRef, InjectionKey, Ref } from "vue";
import { Instance } from "@popperjs/core";
//#region ../../packages/components/popper/src/constants.d.ts
type Measurable = {
getBoundingClientRect: () => DOMRect;
};
/**
* triggerRef indicates the element that triggers popper
* contentRef indicates the element of popper content
* referenceRef indicates the element that popper content relative with
*/
type ElPopperInjectionContext = {
triggerRef: Ref<Measurable | undefined>;
contentRef: Ref<HTMLElement | undefined>;
popperInstanceRef: Ref<Instance | undefined>;
referenceRef: Ref<Measurable | undefined>;
role: ComputedRef<string>;
};
type ElPopperContentInjectionContext = {
arrowRef: Ref<HTMLElement | undefined>;
arrowStyle: ComputedRef<CSSProperties>;
};
declare const POPPER_INJECTION_KEY: InjectionKey<ElPopperInjectionContext>;
declare const POPPER_CONTENT_INJECTION_KEY: InjectionKey<ElPopperContentInjectionContext>;
//#endregion
export { ElPopperContentInjectionContext, ElPopperInjectionContext, Measurable, POPPER_CONTENT_INJECTION_KEY, POPPER_INJECTION_KEY };
@@ -0,0 +1,10 @@
Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
//#region ../../packages/components/popper/src/constants.ts
const POPPER_INJECTION_KEY = Symbol("popper");
const POPPER_CONTENT_INJECTION_KEY = Symbol("popperContent");
//#endregion
exports.POPPER_CONTENT_INJECTION_KEY = POPPER_CONTENT_INJECTION_KEY;
exports.POPPER_INJECTION_KEY = POPPER_INJECTION_KEY;
//# sourceMappingURL=constants.js.map
@@ -0,0 +1 @@
{"version":3,"file":"constants.js","names":[],"sources":["../../../../../../packages/components/popper/src/constants.ts"],"sourcesContent":["import type { CSSProperties, ComputedRef, InjectionKey, Ref } from 'vue'\nimport type { Instance } from '@popperjs/core'\n\nexport type Measurable = {\n getBoundingClientRect: () => DOMRect\n}\n\n/**\n * triggerRef indicates the element that triggers popper\n * contentRef indicates the element of popper content\n * referenceRef indicates the element that popper content relative with\n */\nexport type ElPopperInjectionContext = {\n triggerRef: Ref<Measurable | undefined>\n contentRef: Ref<HTMLElement | undefined>\n popperInstanceRef: Ref<Instance | undefined>\n referenceRef: Ref<Measurable | undefined>\n role: ComputedRef<string>\n}\n\nexport type ElPopperContentInjectionContext = {\n arrowRef: Ref<HTMLElement | undefined>\n arrowStyle: ComputedRef<CSSProperties>\n}\n\nexport const POPPER_INJECTION_KEY: InjectionKey<ElPopperInjectionContext> =\n Symbol('popper')\n\nexport const POPPER_CONTENT_INJECTION_KEY: InjectionKey<ElPopperContentInjectionContext> =\n Symbol('popperContent')\n"],"mappings":";;;AAyBA,MAAa,uBACX,OAAO,SAAS;AAElB,MAAa,+BACX,OAAO,gBAAgB"}
@@ -0,0 +1,260 @@
import { EpPropFinalized, EpPropMergeType } from "../../../utils/vue/props/types.js";
import "../../../utils/index.js";
import { PopperEffect } from "./popper.js";
import { Measurable } from "./constants.js";
import { PopperArrowProps } from "./arrow.js";
import { _default } from "./content.vue.js";
import * as vue from "vue";
import { ExtractPublicPropTypes, StyleValue } from "vue";
import { Options, Placement } from "@popperjs/core";
//#region ../../packages/components/popper/src/content.d.ts
type ClassObjectType = Record<string, boolean>;
type ClassType = string | ClassObjectType | ClassType[];
declare const POSITIONING_STRATEGIES: readonly ["fixed", "absolute"];
interface CreatePopperInstanceParams {
referenceEl: Measurable;
popperContentEl: HTMLElement;
arrowEl: HTMLElement | undefined;
}
interface PopperCoreConfigProps {
boundariesPadding?: number;
fallbackPlacements?: Placement[];
gpuAcceleration?: boolean;
/**
* @description offset of the Tooltip
*/
offset?: number;
/**
* @description position of Tooltip
*/
placement?: Placement;
/**
* @description [popper.js](https://popper.js.org/docs/v2/) parameters
*/
popperOptions?: Partial<Options>;
strategy?: (typeof POSITIONING_STRATEGIES)[number];
}
/**
* @deprecated Removed after 3.0.0, Use `PopperCoreConfigProps` instead.
*/
declare const popperCoreConfigProps: {
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>;
};
/**
* @deprecated Removed after 3.0.0, Use `PopperCoreConfigProps` instead.
*/
type PopperCoreConfigPropsPublic = ExtractPublicPropTypes<typeof popperCoreConfigProps>;
interface PopperContentProps extends PopperCoreConfigProps, PopperArrowProps {
id?: string;
style?: StyleValue;
className?: ClassType;
effect?: PopperEffect;
visible?: boolean;
enterable?: boolean;
pure?: boolean;
focusOnShow?: boolean;
trapping?: boolean;
popperClass?: ClassType;
popperStyle?: StyleValue;
referenceEl?: HTMLElement;
triggerTargetEl?: HTMLElement;
stopPopperMouseEvent?: boolean;
virtualTriggering?: boolean;
zIndex?: number;
ariaLabel?: string;
loop?: boolean;
}
/**
* @deprecated Removed after 3.0.0, Use `PopperContentProps` instead.
*/
declare const popperContentProps: {
readonly loop: BooleanConstructor;
readonly ariaLabel: StringConstructor;
readonly id: StringConstructor;
readonly style: {
readonly type: vue.PropType<EpPropMergeType<(new (...args: any[]) => string | false | vue.CSSProperties | StyleValue[]) | (() => StyleValue) | (((new (...args: any[]) => string | false | vue.CSSProperties | StyleValue[]) | (() => 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 | ClassObjectType | ClassType[]) | (() => ClassType) | (((new (...args: any[]) => string | ClassObjectType | ClassType[]) | (() => ClassType)) | 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 visible: BooleanConstructor;
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 | ClassObjectType | ClassType[]) | (() => ClassType) | (((new (...args: any[]) => string | ClassObjectType | ClassType[]) | (() => ClassType)) | 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 | StyleValue[]) | (() => StyleValue) | (((new (...args: any[]) => string | false | vue.CSSProperties | StyleValue[]) | (() => 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>;
};
/**
* @deprecated Removed after 3.0.0, Use `PopperContentProps` instead.
*/
type PopperContentPropsPublic = ExtractPublicPropTypes<typeof popperContentProps>;
declare const popperCoreConfigPropsDefaults: {
readonly boundariesPadding: 0;
readonly gpuAcceleration: true;
readonly offset: 12;
readonly placement: "bottom";
readonly popperOptions: () => {};
readonly strategy: "absolute";
};
declare const popperContentPropsDefaults: {
readonly effect: "dark";
readonly enterable: true;
readonly stopPopperMouseEvent: true;
readonly visible: false;
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";
};
declare const popperContentEmits: {
mouseenter: (evt: MouseEvent) => boolean;
mouseleave: (evt: MouseEvent) => boolean;
focus: () => boolean;
blur: () => boolean;
close: () => boolean;
};
type PopperContentEmits = typeof popperContentEmits;
type PopperContentInstance = InstanceType<typeof _default> & unknown;
/** @deprecated use `popperCoreConfigProps` instead, and it will be deprecated in the next major version */
declare const usePopperCoreConfigProps: {
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>;
};
/** @deprecated use `popperContentProps` instead, and it will be deprecated in the next major version */
declare const usePopperContentProps: {
readonly loop: BooleanConstructor;
readonly ariaLabel: StringConstructor;
readonly id: StringConstructor;
readonly style: {
readonly type: vue.PropType<EpPropMergeType<(new (...args: any[]) => string | false | vue.CSSProperties | StyleValue[]) | (() => StyleValue) | (((new (...args: any[]) => string | false | vue.CSSProperties | StyleValue[]) | (() => 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 | ClassObjectType | ClassType[]) | (() => ClassType) | (((new (...args: any[]) => string | ClassObjectType | ClassType[]) | (() => ClassType)) | 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 visible: BooleanConstructor;
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 | ClassObjectType | ClassType[]) | (() => ClassType) | (((new (...args: any[]) => string | ClassObjectType | ClassType[]) | (() => ClassType)) | 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 | StyleValue[]) | (() => StyleValue) | (((new (...args: any[]) => string | false | vue.CSSProperties | StyleValue[]) | (() => 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>;
};
/** @deprecated use `popperContentEmits` instead, and it will be deprecated in the next major version */
declare const usePopperContentEmits: {
mouseenter: (evt: MouseEvent) => boolean;
mouseleave: (evt: MouseEvent) => boolean;
focus: () => boolean;
blur: () => boolean;
close: () => boolean;
};
/** @deprecated use `PopperCoreConfigProps` instead, and it will be deprecated in the next major version */
type UsePopperCoreConfigProps = PopperCoreConfigProps;
/** @deprecated use `PopperContentProps` instead, and it will be deprecated in the next major version */
type UsePopperContentProps = PopperContentProps;
/** @deprecated use `PopperContentInstance` instead, and it will be deprecated in the next major version */
type ElPopperArrowContent = PopperContentInstance;
//#endregion
export { CreatePopperInstanceParams, ElPopperArrowContent, PopperContentEmits, PopperContentInstance, PopperContentProps, PopperContentPropsPublic, PopperCoreConfigProps, PopperCoreConfigPropsPublic, UsePopperContentProps, UsePopperCoreConfigProps, popperContentEmits, popperContentProps, popperContentPropsDefaults, popperCoreConfigProps, popperCoreConfigPropsDefaults, usePopperContentEmits, usePopperContentProps, usePopperCoreConfigProps };
+141
View File
@@ -0,0 +1,141 @@
Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
const require_runtime = require('../../../_virtual/_rolldown/runtime.js');
const require_runtime$1 = require('../../../utils/vue/props/runtime.js');
const require_index = require('../../../hooks/use-aria/index.js');
const require_arrow = require('./arrow.js');
let _popperjs_core = require("@popperjs/core");
//#region ../../packages/components/popper/src/content.ts
const POSITIONING_STRATEGIES = ["fixed", "absolute"];
/**
* @deprecated Removed after 3.0.0, Use `PopperCoreConfigProps` instead.
*/
const popperCoreConfigProps = require_runtime$1.buildProps({
boundariesPadding: {
type: Number,
default: 0
},
fallbackPlacements: {
type: require_runtime$1.definePropType(Array),
default: void 0
},
gpuAcceleration: {
type: Boolean,
default: true
},
offset: {
type: Number,
default: 12
},
placement: {
type: String,
values: _popperjs_core.placements,
default: "bottom"
},
popperOptions: {
type: require_runtime$1.definePropType(Object),
default: () => ({})
},
strategy: {
type: String,
values: POSITIONING_STRATEGIES,
default: "absolute"
}
});
/**
* @deprecated Removed after 3.0.0, Use `PopperContentProps` instead.
*/
const popperContentProps = require_runtime$1.buildProps({
...popperCoreConfigProps,
...require_arrow.popperArrowProps,
id: String,
style: { type: require_runtime$1.definePropType([
String,
Array,
Object
]) },
className: { type: require_runtime$1.definePropType([
String,
Array,
Object
]) },
effect: {
type: require_runtime$1.definePropType(String),
default: "dark"
},
visible: Boolean,
enterable: {
type: Boolean,
default: true
},
pure: Boolean,
focusOnShow: Boolean,
trapping: Boolean,
popperClass: { type: require_runtime$1.definePropType([
String,
Array,
Object
]) },
popperStyle: { type: require_runtime$1.definePropType([
String,
Array,
Object
]) },
referenceEl: { type: require_runtime$1.definePropType(Object) },
triggerTargetEl: { type: require_runtime$1.definePropType(Object) },
stopPopperMouseEvent: {
type: Boolean,
default: true
},
virtualTriggering: Boolean,
zIndex: Number,
...require_index.useAriaProps(["ariaLabel"]),
loop: Boolean
});
const popperCoreConfigPropsDefaults = {
boundariesPadding: 0,
gpuAcceleration: true,
offset: 12,
placement: "bottom",
popperOptions: () => ({}),
strategy: "absolute"
};
const popperContentPropsDefaults = {
...popperCoreConfigPropsDefaults,
...require_arrow.popperArrowPropsDefaults,
effect: "dark",
enterable: true,
stopPopperMouseEvent: true,
visible: false,
pure: false,
focusOnShow: false,
trapping: false,
virtualTriggering: false,
loop: false,
style: void 0,
popperStyle: void 0
};
const popperContentEmits = {
mouseenter: (evt) => evt instanceof MouseEvent,
mouseleave: (evt) => evt instanceof MouseEvent,
focus: () => true,
blur: () => true,
close: () => true
};
/** @deprecated use `popperCoreConfigProps` instead, and it will be deprecated in the next major version */
const usePopperCoreConfigProps = popperCoreConfigProps;
/** @deprecated use `popperContentProps` instead, and it will be deprecated in the next major version */
const usePopperContentProps = popperContentProps;
/** @deprecated use `popperContentEmits` instead, and it will be deprecated in the next major version */
const usePopperContentEmits = popperContentEmits;
//#endregion
exports.popperContentEmits = popperContentEmits;
exports.popperContentProps = popperContentProps;
exports.popperContentPropsDefaults = popperContentPropsDefaults;
exports.popperCoreConfigProps = popperCoreConfigProps;
exports.popperCoreConfigPropsDefaults = popperCoreConfigPropsDefaults;
exports.usePopperContentEmits = usePopperContentEmits;
exports.usePopperContentProps = usePopperContentProps;
exports.usePopperCoreConfigProps = usePopperCoreConfigProps;
//# sourceMappingURL=content.js.map
File diff suppressed because one or more lines are too long
@@ -0,0 +1,70 @@
import { PopperEffect } from "./popper.js";
import "../../../index.js";
import { PopperContentProps } from "./content.js";
import { Options as Options$1, Placement as Placement$1 } from "../index.js";
import * as vue from "vue";
import * as _popperjs_core0 from "@popperjs/core";
//#region ../../packages/components/popper/src/content.vue.d.ts
declare var __VLS_13: {};
type __VLS_Slots = {} & {
default?: (props: typeof __VLS_13) => any;
};
declare const __VLS_base: vue.DefineComponent<PopperContentProps, {
/**
* @description popper content element
*/
popperContentRef: vue.Ref<HTMLElement | undefined, HTMLElement | undefined>;
/**
* @description popperjs instance
*/
popperInstanceRef: vue.ComputedRef<_popperjs_core0.Instance | undefined>;
/**
* @description method for updating popper
*/
updatePopper: (shouldUpdateZIndex?: boolean) => void;
/**
* @description content style
*/
contentStyle: vue.ComputedRef<vue.StyleValue[]>;
}, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {
blur: () => void;
close: () => void;
focus: () => void;
mouseenter: (evt: MouseEvent) => void;
mouseleave: (evt: MouseEvent) => void;
}, string, vue.PublicProps, Readonly<PopperContentProps> & Readonly<{
onBlur?: (() => any) | undefined;
onClose?: (() => any) | undefined;
onFocus?: (() => any) | undefined;
onMouseenter?: ((evt: MouseEvent) => any) | undefined;
onMouseleave?: ((evt: MouseEvent) => any) | undefined;
}>, {
offset: number;
effect: PopperEffect;
visible: boolean;
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$1;
popperOptions: Partial<Options$1>;
strategy: "fixed" | "absolute";
arrowOffset: 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,134 @@
const require_runtime = require('../../../_virtual/_rolldown/runtime.js');
const require_types = require('../../../utils/types.js');
const require_constants = require('./constants.js');
const require_content = require('./content.js');
const require_index = require('../../focus-trap/index.js');
const require_constants$1 = require('../../form/src/constants.js');
const require_use_content = require('./composables/use-content.js');
const require_use_content_dom = require('./composables/use-content-dom.js');
const require_use_focus_trap = require('./composables/use-focus-trap.js');
let lodash_unified = require("lodash-unified");
let vue = require("vue");
let _vue_shared = require("@vue/shared");
//#region ../../packages/components/popper/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: "ElPopperContent",
__name: "content",
props: require_content.popperContentProps,
emits: require_content.popperContentEmits,
setup(__props, { expose: __expose, emit: __emit }) {
const emit = __emit;
const props = __props;
const { focusStartRef, trapped, onFocusAfterReleased, onFocusAfterTrapped, onFocusInTrap, onFocusoutPrevented, onReleaseRequested } = require_use_focus_trap.usePopperContentFocusTrap(props, emit);
const { attributes, arrowRef, contentRef, styles, instanceRef, role, update } = require_use_content.usePopperContent(props);
const { ariaModal, arrowStyle, contentAttrs, contentClass, contentStyle, updateZIndex } = require_use_content_dom.usePopperContentDOM(props, {
styles,
attributes,
role
});
const formItemContext = (0, vue.inject)(require_constants$1.formItemContextKey, void 0);
(0, vue.provide)(require_constants.POPPER_CONTENT_INJECTION_KEY, {
arrowStyle,
arrowRef
});
if (formItemContext) (0, vue.provide)(require_constants$1.formItemContextKey, {
...formItemContext,
addInputId: _vue_shared.NOOP,
removeInputId: _vue_shared.NOOP
});
let triggerTargetAriaStopWatch = void 0;
const updatePopper = (shouldUpdateZIndex = true) => {
update();
shouldUpdateZIndex && updateZIndex();
};
const togglePopperAlive = () => {
updatePopper(false);
if (props.visible && props.focusOnShow) trapped.value = true;
else if (props.visible === false) trapped.value = false;
};
(0, vue.onMounted)(() => {
(0, vue.watch)(() => props.triggerTargetEl, (triggerTargetEl, prevTriggerTargetEl) => {
triggerTargetAriaStopWatch?.();
triggerTargetAriaStopWatch = void 0;
const el = (0, vue.unref)(triggerTargetEl || contentRef.value);
const prevEl = (0, vue.unref)(prevTriggerTargetEl || contentRef.value);
if (require_types.isElement(el)) triggerTargetAriaStopWatch = (0, vue.watch)([
role,
() => props.ariaLabel,
ariaModal,
() => props.id
], (watches) => {
[
"role",
"aria-label",
"aria-modal",
"id"
].forEach((key, idx) => {
(0, lodash_unified.isNil)(watches[idx]) ? el.removeAttribute(key) : el.setAttribute(key, watches[idx]);
});
}, { immediate: true });
if (prevEl !== el && require_types.isElement(prevEl)) [
"role",
"aria-label",
"aria-modal",
"id"
].forEach((key) => {
prevEl.removeAttribute(key);
});
}, { immediate: true });
(0, vue.watch)(() => props.visible, togglePopperAlive, { immediate: true });
});
(0, vue.onBeforeUnmount)(() => {
triggerTargetAriaStopWatch?.();
triggerTargetAriaStopWatch = void 0;
contentRef.value = void 0;
});
__expose({
popperContentRef: contentRef,
popperInstanceRef: instanceRef,
updatePopper,
contentStyle
});
return (_ctx, _cache) => {
return (0, vue.openBlock)(), (0, vue.createElementBlock)("div", (0, vue.mergeProps)({
ref_key: "contentRef",
ref: contentRef
}, (0, vue.unref)(contentAttrs), {
style: (0, vue.unref)(contentStyle),
class: (0, vue.unref)(contentClass),
tabindex: "-1",
onMouseenter: _cache[0] || (_cache[0] = (e) => _ctx.$emit("mouseenter", e)),
onMouseleave: _cache[1] || (_cache[1] = (e) => _ctx.$emit("mouseleave", e))
}), [(0, vue.createVNode)((0, vue.unref)(require_index.default), {
loop: __props.loop,
trapped: (0, vue.unref)(trapped),
"trap-on-focus-in": true,
"focus-trap-el": (0, vue.unref)(contentRef),
"focus-start-el": (0, vue.unref)(focusStartRef),
onFocusAfterTrapped: (0, vue.unref)(onFocusAfterTrapped),
onFocusAfterReleased: (0, vue.unref)(onFocusAfterReleased),
onFocusin: (0, vue.unref)(onFocusInTrap),
onFocusoutPrevented: (0, vue.unref)(onFocusoutPrevented),
onReleaseRequested: (0, vue.unref)(onReleaseRequested)
}, {
default: (0, vue.withCtx)(() => [(0, vue.renderSlot)(_ctx.$slots, "default")]),
_: 3
}, 8, [
"loop",
"trapped",
"focus-trap-el",
"focus-start-el",
"onFocusAfterTrapped",
"onFocusAfterReleased",
"onFocusin",
"onFocusoutPrevented",
"onReleaseRequested"
])], 16);
};
}
});
//#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/popper/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
@@ -0,0 +1 @@
{"version":3,"file":"content2.js","names":[],"sources":["../../../../../../packages/components/popper/src/content.vue"],"sourcesContent":["<template>\n <div\n ref=\"contentRef\"\n v-bind=\"contentAttrs\"\n :style=\"contentStyle\"\n :class=\"contentClass\"\n tabindex=\"-1\"\n @mouseenter=\"(e) => $emit('mouseenter', e)\"\n @mouseleave=\"(e) => $emit('mouseleave', e)\"\n >\n <el-focus-trap\n :loop=\"loop\"\n :trapped=\"trapped\"\n :trap-on-focus-in=\"true\"\n :focus-trap-el=\"contentRef\"\n :focus-start-el=\"focusStartRef\"\n @focus-after-trapped=\"onFocusAfterTrapped\"\n @focus-after-released=\"onFocusAfterReleased\"\n @focusin=\"onFocusInTrap\"\n @focusout-prevented=\"onFocusoutPrevented\"\n @release-requested=\"onReleaseRequested\"\n >\n <slot />\n </el-focus-trap>\n </div>\n</template>\n\n<script lang=\"ts\" setup>\nimport { inject, onBeforeUnmount, onMounted, provide, unref, watch } from 'vue'\nimport { isNil } from 'lodash-unified'\nimport { NOOP, isElement } from '@element-plus/utils'\nimport ElFocusTrap from '@element-plus/components/focus-trap'\nimport { formItemContextKey } from '@element-plus/components/form'\nimport { POPPER_CONTENT_INJECTION_KEY } from './constants'\nimport { popperContentEmits, popperContentPropsDefaults } from './content'\nimport {\n usePopperContent,\n usePopperContentDOM,\n usePopperContentFocusTrap,\n} from './composables'\n\nimport type { WatchStopHandle } from 'vue'\nimport type { PopperContentProps } from './content'\n\ndefineOptions({\n name: 'ElPopperContent',\n})\n\nconst emit = defineEmits(popperContentEmits)\n\nconst props = withDefaults(\n defineProps<PopperContentProps>(),\n popperContentPropsDefaults\n)\n\nconst {\n focusStartRef,\n trapped,\n\n onFocusAfterReleased,\n onFocusAfterTrapped,\n onFocusInTrap,\n onFocusoutPrevented,\n onReleaseRequested,\n} = usePopperContentFocusTrap(props, emit)\n\nconst { attributes, arrowRef, contentRef, styles, instanceRef, role, update } =\n usePopperContent(props)\n\nconst {\n ariaModal,\n arrowStyle,\n contentAttrs,\n contentClass,\n contentStyle,\n updateZIndex,\n} = usePopperContentDOM(props, {\n styles,\n attributes,\n role,\n})\n\nconst formItemContext = inject(formItemContextKey, undefined)\n\nprovide(POPPER_CONTENT_INJECTION_KEY, {\n arrowStyle,\n arrowRef,\n})\n\nif (formItemContext) {\n // disallow auto-id from inside popper content\n provide(formItemContextKey, {\n ...formItemContext,\n addInputId: NOOP,\n removeInputId: NOOP,\n })\n}\n\nlet triggerTargetAriaStopWatch: WatchStopHandle | undefined = undefined\n\nconst updatePopper = (shouldUpdateZIndex = true) => {\n update()\n shouldUpdateZIndex && updateZIndex()\n}\n\nconst togglePopperAlive = () => {\n updatePopper(false)\n if (props.visible && props.focusOnShow) {\n trapped.value = true\n } else if (props.visible === false) {\n trapped.value = false\n }\n}\n\nonMounted(() => {\n watch(\n () => props.triggerTargetEl,\n (triggerTargetEl, prevTriggerTargetEl) => {\n triggerTargetAriaStopWatch?.()\n triggerTargetAriaStopWatch = undefined\n\n const el = unref(triggerTargetEl || contentRef.value)\n const prevEl = unref(prevTriggerTargetEl || contentRef.value)\n\n if (isElement(el)) {\n triggerTargetAriaStopWatch = watch(\n [role, () => props.ariaLabel, ariaModal, () => props.id],\n (watches) => {\n ;['role', 'aria-label', 'aria-modal', 'id'].forEach((key, idx) => {\n isNil(watches[idx])\n ? el.removeAttribute(key)\n : el.setAttribute(key, watches[idx]!)\n })\n },\n { immediate: true }\n )\n }\n if (prevEl !== el && isElement(prevEl)) {\n ;['role', 'aria-label', 'aria-modal', 'id'].forEach((key) => {\n prevEl.removeAttribute(key)\n })\n }\n },\n { immediate: true }\n )\n\n watch(() => props.visible, togglePopperAlive, { immediate: true })\n})\n\nonBeforeUnmount(() => {\n triggerTargetAriaStopWatch?.()\n triggerTargetAriaStopWatch = undefined\n contentRef.value = undefined\n})\n\ndefineExpose({\n /**\n * @description popper content element\n */\n popperContentRef: contentRef,\n /**\n * @description popperjs instance\n */\n popperInstanceRef: instanceRef,\n /**\n * @description method for updating popper\n */\n updatePopper,\n\n /**\n * @description content style\n */\n contentStyle,\n})\n</script>\n"],"mappings":""}
@@ -0,0 +1,40 @@
import { EpPropFinalized } from "../../../utils/vue/props/types.js";
import "../../../utils/index.js";
import { _default } from "./popper.vue.js";
import { ExtractPublicPropTypes } from "vue";
//#region ../../packages/components/popper/src/popper.d.ts
declare const effects: readonly ["light", "dark"];
declare const triggers: readonly ["click", "contextmenu", "hover", "focus"];
declare const Effect: {
readonly LIGHT: "light";
readonly DARK: "dark";
};
declare const roleTypes: readonly ["dialog", "grid", "group", "listbox", "menu", "navigation", "tooltip", "tree"];
type PopperEffect = (typeof effects)[number] | (string & NonNullable<unknown>);
type PopperTrigger = (typeof triggers)[number];
interface PopperProps {
/**
* @description role determines how aria attributes are distributed
*/
role?: (typeof roleTypes)[number];
}
/**
* @deprecated Removed after 3.0.0, Use `PopperProps` instead.
*/
declare const popperProps: {
readonly role: EpPropFinalized<StringConstructor, "listbox" | "grid" | "menu" | "tooltip" | "dialog" | "group" | "navigation" | "tree", unknown, "tooltip", boolean>;
};
/**
* @deprecated Removed after 3.0.0, Use `PopperProps` instead.
*/
type PopperPropsPublic = ExtractPublicPropTypes<typeof popperProps>;
type PopperInstance = InstanceType<typeof _default> & unknown;
/** @deprecated use `popperProps` instead, and it will be deprecated in the next major version */
declare const usePopperProps: {
readonly role: EpPropFinalized<StringConstructor, "listbox" | "grid" | "menu" | "tooltip" | "dialog" | "group" | "navigation" | "tree", unknown, "tooltip", boolean>;
};
/** @deprecated use `PopperProps` instead, and it will be deprecated in the next major version */
type UsePopperProps = PopperProps;
//#endregion
export { Effect, PopperEffect, PopperInstance, PopperProps, PopperPropsPublic, PopperTrigger, UsePopperProps, popperProps, roleTypes, usePopperProps };
+35
View File
@@ -0,0 +1,35 @@
Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
const require_runtime = require('../../../utils/vue/props/runtime.js');
//#region ../../packages/components/popper/src/popper.ts
const Effect = {
LIGHT: "light",
DARK: "dark"
};
const roleTypes = [
"dialog",
"grid",
"group",
"listbox",
"menu",
"navigation",
"tooltip",
"tree"
];
/**
* @deprecated Removed after 3.0.0, Use `PopperProps` instead.
*/
const popperProps = require_runtime.buildProps({ role: {
type: String,
values: roleTypes,
default: "tooltip"
} });
/** @deprecated use `popperProps` instead, and it will be deprecated in the next major version */
const usePopperProps = popperProps;
//#endregion
exports.Effect = Effect;
exports.popperProps = popperProps;
exports.roleTypes = roleTypes;
exports.usePopperProps = usePopperProps;
//# sourceMappingURL=popper.js.map
@@ -0,0 +1 @@
{"version":3,"file":"popper.js","names":["buildProps"],"sources":["../../../../../../packages/components/popper/src/popper.ts"],"sourcesContent":["/* eslint-disable @typescript-eslint/no-unused-vars */\n\nimport { buildProps } from '@element-plus/utils'\n\nimport type { ExtractPublicPropTypes } from 'vue'\nimport type Popper from './popper.vue'\n\nconst effects = ['light', 'dark'] as const\nconst triggers = ['click', 'contextmenu', 'hover', 'focus'] as const\n\nexport const Effect = {\n LIGHT: 'light',\n DARK: 'dark',\n} as const\n\nexport const roleTypes = [\n 'dialog',\n 'grid',\n 'group',\n 'listbox',\n 'menu',\n 'navigation',\n 'tooltip',\n 'tree',\n] as const\n\nexport type PopperEffect =\n | (typeof effects)[number]\n | (string & NonNullable<unknown>)\nexport type PopperTrigger = (typeof triggers)[number]\n\nexport interface PopperProps {\n /**\n * @description role determines how aria attributes are distributed\n */\n role?: (typeof roleTypes)[number]\n}\n\n/**\n * @deprecated Removed after 3.0.0, Use `PopperProps` instead.\n */\nexport const popperProps = buildProps({\n role: {\n type: String,\n values: roleTypes,\n default: 'tooltip',\n },\n} as const)\n\n/**\n * @deprecated Removed after 3.0.0, Use `PopperProps` instead.\n */\nexport type PopperPropsPublic = ExtractPublicPropTypes<typeof popperProps>\n\nexport type PopperInstance = InstanceType<typeof Popper> & unknown\n\n/** @deprecated use `popperProps` instead, and it will be deprecated in the next major version */\nexport const usePopperProps = popperProps\n\n/** @deprecated use `PopperProps` instead, and it will be deprecated in the next major version */\nexport type UsePopperProps = PopperProps\n"],"mappings":";;;;AAUA,MAAa,SAAS;CACpB,OAAO;CACP,MAAM;CACP;AAED,MAAa,YAAY;CACvB;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACD;;;;AAiBD,MAAa,cAAcA,2BAAW,EACpC,MAAM;CACJ,MAAM;CACN,QAAQ;CACR,SAAS;CACV,EACF,CAAU;;AAUX,MAAa,iBAAiB"}
@@ -0,0 +1,21 @@
import { PopperProps, roleTypes } from "./popper.js";
import { ElPopperInjectionContext } from "./constants.js";
import * as vue from "vue";
//#region ../../packages/components/popper/src/popper.vue.d.ts
declare var __VLS_1: {};
type __VLS_Slots = {} & {
default?: (props: typeof __VLS_1) => any;
};
declare const __VLS_base: vue.DefineComponent<PopperProps, ElPopperInjectionContext, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {}, string, vue.PublicProps, Readonly<PopperProps> & Readonly<{}>, {
role: typeof roleTypes[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,31 @@
const require_runtime = require('../../../_virtual/_rolldown/runtime.js');
const require_popper = require('./popper.js');
const require_constants = require('./constants.js');
let vue = require("vue");
//#region ../../packages/components/popper/src/popper.vue?vue&type=script&setup=true&lang.ts
var popper_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ (0, vue.defineComponent)({
name: "ElPopper",
inheritAttrs: false,
__name: "popper",
props: require_popper.popperProps,
setup(__props, { expose: __expose }) {
const props = __props;
const popperProvides = {
triggerRef: (0, vue.ref)(),
popperInstanceRef: (0, vue.ref)(),
contentRef: (0, vue.ref)(),
referenceRef: (0, vue.ref)(),
role: (0, vue.computed)(() => props.role)
};
__expose(popperProvides);
(0, vue.provide)(require_constants.POPPER_INJECTION_KEY, popperProvides);
return (_ctx, _cache) => {
return (0, vue.renderSlot)(_ctx.$slots, "default");
};
}
});
//#endregion
exports.default = popper_vue_vue_type_script_setup_true_lang_default;
//# sourceMappingURL=popper.vue_vue_type_script_setup_true_lang.js.map
@@ -0,0 +1 @@
{"version":3,"file":"popper.vue_vue_type_script_setup_true_lang.js","names":[],"sources":["../../../../../../packages/components/popper/src/popper.vue"],"sourcesContent":["<template>\n <slot />\n</template>\n\n<script lang=\"ts\" setup>\nimport { computed, provide, ref } from 'vue'\nimport { POPPER_INJECTION_KEY } from './constants'\n\nimport type { Instance as PopperInstance } from '@popperjs/core'\nimport type { ElPopperInjectionContext } from './constants'\nimport type { PopperProps } from './popper'\n\ndefineOptions({\n name: 'ElPopper',\n inheritAttrs: false,\n})\nconst props = withDefaults(defineProps<PopperProps>(), {\n role: 'tooltip',\n})\n\nconst triggerRef = ref<HTMLElement>()\nconst popperInstanceRef = ref<PopperInstance>()\nconst contentRef = ref<HTMLElement>()\nconst referenceRef = ref<HTMLElement>()\nconst role = computed(() => props.role)\n\nconst popperProvides = {\n /**\n * @description trigger element\n */\n triggerRef,\n /**\n * @description popperjs instance\n */\n popperInstanceRef,\n /**\n * @description popper content element\n */\n contentRef,\n /**\n * @description popper reference element\n */\n referenceRef,\n /**\n * @description role determines how aria attributes are distributed\n */\n role,\n} as ElPopperInjectionContext\n\ndefineExpose(popperProvides)\n\nprovide(POPPER_INJECTION_KEY, popperProvides)\n</script>\n"],"mappings":";;;;;;;;;;;;EAgBA,MAAM,QAAQ;EAUd,MAAM,iBAAiB;GAIrB,0BAVkC;GAclC,iCAb4C;GAiB5C,0BAhBkC;GAoBlC,4BAnBoC;GAuBpC,8BAtB0B,MAAM,KAAI;GAuBrC;AAED,WAAa,eAAc;AAE3B,mBAAQ,wCAAsB,eAAc;;8BAlDlC,KAAA,QAAA,UAAA"}
@@ -0,0 +1,9 @@
Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: 'Module' } });
const require_popper_vue_vue_type_script_setup_true_lang = require('./popper.vue_vue_type_script_setup_true_lang.js');
//#region ../../packages/components/popper/src/popper.vue
var popper_default = require_popper_vue_vue_type_script_setup_true_lang.default;
//#endregion
exports.default = popper_default;
//# sourceMappingURL=popper2.js.map
@@ -0,0 +1 @@
{"version":3,"file":"popper2.js","names":[],"sources":["../../../../../../packages/components/popper/src/popper.vue"],"sourcesContent":["<template>\n <slot />\n</template>\n\n<script lang=\"ts\" setup>\nimport { computed, provide, ref } from 'vue'\nimport { POPPER_INJECTION_KEY } from './constants'\n\nimport type { Instance as PopperInstance } from '@popperjs/core'\nimport type { ElPopperInjectionContext } from './constants'\nimport type { PopperProps } from './popper'\n\ndefineOptions({\n name: 'ElPopper',\n inheritAttrs: false,\n})\nconst props = withDefaults(defineProps<PopperProps>(), {\n role: 'tooltip',\n})\n\nconst triggerRef = ref<HTMLElement>()\nconst popperInstanceRef = ref<PopperInstance>()\nconst contentRef = ref<HTMLElement>()\nconst referenceRef = ref<HTMLElement>()\nconst role = computed(() => props.role)\n\nconst popperProvides = {\n /**\n * @description trigger element\n */\n triggerRef,\n /**\n * @description popperjs instance\n */\n popperInstanceRef,\n /**\n * @description popper content element\n */\n contentRef,\n /**\n * @description popper reference element\n */\n referenceRef,\n /**\n * @description role determines how aria attributes are distributed\n */\n role,\n} as ElPopperInjectionContext\n\ndefineExpose(popperProvides)\n\nprovide(POPPER_INJECTION_KEY, popperProvides)\n</script>\n"],"mappings":""}
@@ -0,0 +1,135 @@
import { Measurable } from "./constants.js";
import { _default } from "./trigger.vue.js";
import * as vue from "vue";
//#region ../../packages/components/popper/src/trigger.d.ts
interface PopperTriggerProps {
/** @description Indicates the reference element to which the popper is attached */
virtualRef?: Measurable;
/** @description Indicates whether virtual triggering is enabled */
virtualTriggering?: boolean;
onMouseenter?: (e: MouseEvent) => void;
onMouseleave?: (e: MouseEvent) => void;
onClick?: (e: PointerEvent) => void;
onKeydown?: (e: KeyboardEvent) => void;
onFocus?: (e: FocusEvent) => void;
onBlur?: (e: FocusEvent) => void;
onContextmenu?: (e: PointerEvent) => void;
id?: string;
open?: boolean;
}
/**
* @deprecated Removed after 3.0.0, Use `PopperTriggerProps` instead.
*/
declare const popperTriggerProps: {
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;
};
type PopperTriggerInstance = InstanceType<typeof _default> & unknown;
/** @deprecated use `popperTriggerProps` instead, and it will be deprecated in the next major version */
declare const usePopperTriggerProps: {
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 use `PopperTriggerInstance` instead, and it will be deprecated in the next major version */
type ElPopperArrowTrigger = PopperTriggerInstance;
//#endregion
export { ElPopperArrowTrigger, PopperTriggerInstance, PopperTriggerProps, popperTriggerProps, usePopperTriggerProps };
@@ -0,0 +1,27 @@
Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
const require_runtime = require('../../../utils/vue/props/runtime.js');
//#region ../../packages/components/popper/src/trigger.ts
/**
* @deprecated Removed after 3.0.0, Use `PopperTriggerProps` instead.
*/
const popperTriggerProps = require_runtime.buildProps({
virtualRef: { type: require_runtime.definePropType(Object) },
virtualTriggering: Boolean,
onMouseenter: { type: require_runtime.definePropType(Function) },
onMouseleave: { type: require_runtime.definePropType(Function) },
onClick: { type: require_runtime.definePropType(Function) },
onKeydown: { type: require_runtime.definePropType(Function) },
onFocus: { type: require_runtime.definePropType(Function) },
onBlur: { type: require_runtime.definePropType(Function) },
onContextmenu: { type: require_runtime.definePropType(Function) },
id: String,
open: Boolean
});
/** @deprecated use `popperTriggerProps` instead, and it will be deprecated in the next major version */
const usePopperTriggerProps = popperTriggerProps;
//#endregion
exports.popperTriggerProps = popperTriggerProps;
exports.usePopperTriggerProps = usePopperTriggerProps;
//# sourceMappingURL=trigger.js.map
@@ -0,0 +1 @@
{"version":3,"file":"trigger.js","names":["buildProps","definePropType"],"sources":["../../../../../../packages/components/popper/src/trigger.ts"],"sourcesContent":["import { buildProps, definePropType } from '@element-plus/utils'\n\nimport type { Measurable } from './constants'\nimport type Trigger from './trigger.vue'\n\nexport interface PopperTriggerProps {\n /** @description Indicates the reference element to which the popper is attached */\n virtualRef?: Measurable\n /** @description Indicates whether virtual triggering is enabled */\n virtualTriggering?: boolean\n onMouseenter?: (e: MouseEvent) => void\n onMouseleave?: (e: MouseEvent) => void\n onClick?: (e: PointerEvent) => void\n onKeydown?: (e: KeyboardEvent) => void\n onFocus?: (e: FocusEvent) => void\n onBlur?: (e: FocusEvent) => void\n onContextmenu?: (e: PointerEvent) => void\n id?: string\n open?: boolean\n}\n\n/**\n * @deprecated Removed after 3.0.0, Use `PopperTriggerProps` instead.\n */\nexport const popperTriggerProps = buildProps({\n /** @description Indicates the reference element to which the popper is attached */\n virtualRef: {\n type: definePropType<Measurable>(Object),\n },\n /** @description Indicates whether virtual triggering is enabled */\n virtualTriggering: Boolean,\n onMouseenter: {\n type: definePropType<(e: MouseEvent) => void>(Function),\n },\n onMouseleave: {\n type: definePropType<(e: MouseEvent) => void>(Function),\n },\n onClick: {\n type: definePropType<(e: PointerEvent) => void>(Function),\n },\n onKeydown: {\n type: definePropType<(e: KeyboardEvent) => void>(Function),\n },\n onFocus: {\n type: definePropType<(e: FocusEvent) => void>(Function),\n },\n onBlur: {\n type: definePropType<(e: FocusEvent) => void>(Function),\n },\n onContextmenu: {\n type: definePropType<(e: PointerEvent) => void>(Function),\n },\n id: String,\n open: Boolean,\n} as const)\n\nexport type PopperTriggerInstance = InstanceType<typeof Trigger> & unknown\n\n/** @deprecated use `popperTriggerProps` instead, and it will be deprecated in the next major version */\nexport const usePopperTriggerProps = popperTriggerProps\n\n/** @deprecated use `PopperTriggerInstance` instead, and it will be deprecated in the next major version */\nexport type ElPopperArrowTrigger = PopperTriggerInstance\n"],"mappings":";;;;;;;AAwBA,MAAa,qBAAqBA,2BAAW;CAE3C,YAAY,EACV,MAAMC,+BAA2B,OAAO,EACzC;CAED,mBAAmB;CACnB,cAAc,EACZ,MAAMA,+BAAwC,SAAS,EACxD;CACD,cAAc,EACZ,MAAMA,+BAAwC,SAAS,EACxD;CACD,SAAS,EACP,MAAMA,+BAA0C,SAAS,EAC1D;CACD,WAAW,EACT,MAAMA,+BAA2C,SAAS,EAC3D;CACD,SAAS,EACP,MAAMA,+BAAwC,SAAS,EACxD;CACD,QAAQ,EACN,MAAMA,+BAAwC,SAAS,EACxD;CACD,eAAe,EACb,MAAMA,+BAA0C,SAAS,EAC1D;CACD,IAAI;CACJ,MAAM;CACP,CAAU;;AAKX,MAAa,wBAAwB"}
@@ -0,0 +1,24 @@
import { Measurable } from "./constants.js";
import { PopperTriggerProps } from "./trigger.js";
import * as vue from "vue";
//#region ../../packages/components/popper/src/trigger.vue.d.ts
declare var __VLS_8: {};
type __VLS_Slots = {} & {
default?: (props: typeof __VLS_8) => any;
};
declare const __VLS_base: vue.DefineComponent<PopperTriggerProps, {
/**
* @description trigger element
*/
triggerRef: vue.Ref<Measurable | undefined, Measurable | undefined>;
}, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {}, string, vue.PublicProps, Readonly<PopperTriggerProps> & Readonly<{}>, {}, {}, {}, {}, 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,118 @@
const require_runtime = require('../../../_virtual/_rolldown/runtime.js');
const require_aria = require('../../../utils/dom/aria.js');
const require_types = require('../../../utils/types.js');
const require_index = require('../../../hooks/use-forward-ref/index.js');
const require_constants = require('./constants.js');
const require_trigger = require('./trigger.js');
const require_only_child = require('../../slot/src/only-child.js');
let _vueuse_core = require("@vueuse/core");
let lodash_unified = require("lodash-unified");
let vue = require("vue");
//#region ../../packages/components/popper/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: "ElPopperTrigger",
inheritAttrs: false,
__name: "trigger",
props: require_trigger.popperTriggerProps,
setup(__props, { expose: __expose }) {
const props = __props;
const { role, triggerRef } = (0, vue.inject)(require_constants.POPPER_INJECTION_KEY, void 0);
require_index.useForwardRef(triggerRef);
const ariaControls = (0, vue.computed)(() => {
return ariaHaspopup.value ? props.id : void 0;
});
const ariaDescribedby = (0, vue.computed)(() => {
if (role && role.value === "tooltip") return props.open && props.id ? props.id : void 0;
});
const ariaHaspopup = (0, vue.computed)(() => {
if (role && role.value !== "tooltip") return role.value;
});
const ariaExpanded = (0, vue.computed)(() => {
return ariaHaspopup.value ? `${props.open}` : void 0;
});
let virtualTriggerAriaStopWatch = void 0;
const TRIGGER_ELE_EVENTS = [
"onMouseenter",
"onMouseleave",
"onClick",
"onKeydown",
"onFocus",
"onBlur",
"onContextmenu"
];
(0, vue.onMounted)(() => {
(0, vue.watch)(() => props.virtualRef, (virtualEl) => {
if (virtualEl) triggerRef.value = (0, _vueuse_core.unrefElement)(virtualEl);
}, { immediate: true });
(0, vue.watch)(triggerRef, (el, prevEl) => {
virtualTriggerAriaStopWatch?.();
virtualTriggerAriaStopWatch = void 0;
if (require_types.isElement(prevEl)) TRIGGER_ELE_EVENTS.forEach((eventName) => {
const handler = props[eventName];
if (handler) prevEl.removeEventListener(eventName.slice(2).toLowerCase(), handler, ["onFocus", "onBlur"].includes(eventName));
});
if (require_types.isElement(el)) {
TRIGGER_ELE_EVENTS.forEach((eventName) => {
const handler = props[eventName];
if (handler) el.addEventListener(eventName.slice(2).toLowerCase(), handler, ["onFocus", "onBlur"].includes(eventName));
});
if (require_aria.isFocusable(el)) virtualTriggerAriaStopWatch = (0, vue.watch)([
ariaControls,
ariaDescribedby,
ariaHaspopup,
ariaExpanded
], (watches) => {
[
"aria-controls",
"aria-describedby",
"aria-haspopup",
"aria-expanded"
].forEach((key, idx) => {
(0, lodash_unified.isNil)(watches[idx]) ? el.removeAttribute(key) : el.setAttribute(key, watches[idx]);
});
}, { immediate: true });
}
if (require_types.isElement(prevEl) && require_aria.isFocusable(prevEl)) [
"aria-controls",
"aria-describedby",
"aria-haspopup",
"aria-expanded"
].forEach((key) => prevEl.removeAttribute(key));
}, { immediate: true });
});
(0, vue.onBeforeUnmount)(() => {
virtualTriggerAriaStopWatch?.();
virtualTriggerAriaStopWatch = void 0;
if (triggerRef.value && require_types.isElement(triggerRef.value)) {
const el = triggerRef.value;
TRIGGER_ELE_EVENTS.forEach((eventName) => {
const handler = props[eventName];
if (handler) el.removeEventListener(eventName.slice(2).toLowerCase(), handler, ["onFocus", "onBlur"].includes(eventName));
});
triggerRef.value = void 0;
}
});
__expose({ triggerRef });
return (_ctx, _cache) => {
return !__props.virtualTriggering ? ((0, vue.openBlock)(), (0, vue.createBlock)((0, vue.unref)(require_only_child.OnlyChild), (0, vue.mergeProps)({ key: 0 }, _ctx.$attrs, {
"aria-controls": ariaControls.value,
"aria-describedby": ariaDescribedby.value,
"aria-expanded": ariaExpanded.value,
"aria-haspopup": ariaHaspopup.value
}), {
default: (0, vue.withCtx)(() => [(0, vue.renderSlot)(_ctx.$slots, "default")]),
_: 3
}, 16, [
"aria-controls",
"aria-describedby",
"aria-expanded",
"aria-haspopup"
])) : (0, vue.createCommentVNode)("v-if", true);
};
}
});
//#endregion
exports.default = trigger_vue_vue_type_script_setup_true_lang_default;
//# sourceMappingURL=trigger.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_trigger_vue_vue_type_script_setup_true_lang = require('./trigger.vue_vue_type_script_setup_true_lang.js');
//#region ../../packages/components/popper/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/popper/src/trigger.vue"],"sourcesContent":["<template>\n <el-only-child\n v-if=\"!virtualTriggering\"\n v-bind=\"$attrs\"\n :aria-controls=\"ariaControls\"\n :aria-describedby=\"ariaDescribedby\"\n :aria-expanded=\"ariaExpanded\"\n :aria-haspopup=\"ariaHaspopup\"\n >\n <slot />\n </el-only-child>\n</template>\n\n<script lang=\"ts\" setup>\nimport { computed, inject, onBeforeUnmount, onMounted, watch } from 'vue'\nimport { isNil } from 'lodash-unified'\nimport { unrefElement } from '@vueuse/core'\nimport { ElOnlyChild } from '@element-plus/components/slot'\nimport { useForwardRef } from '@element-plus/hooks'\nimport { isElement, isFocusable } from '@element-plus/utils'\nimport { POPPER_INJECTION_KEY } from './constants'\n\nimport type { WatchStopHandle } from 'vue'\nimport type { PopperTriggerProps } from './trigger'\n\ndefineOptions({\n name: 'ElPopperTrigger',\n inheritAttrs: false,\n})\n\nconst props = defineProps<PopperTriggerProps>()\n\nconst { role, triggerRef } = inject(POPPER_INJECTION_KEY, undefined)!\n\nuseForwardRef(triggerRef)\n\nconst ariaControls = computed<string | undefined>(() => {\n return ariaHaspopup.value ? props.id : undefined\n})\n\nconst ariaDescribedby = computed<string | undefined>(() => {\n if (role && role.value === 'tooltip') {\n return props.open && props.id ? props.id : undefined\n }\n return undefined\n})\n\nconst ariaHaspopup = computed<string | undefined>(() => {\n if (role && role.value !== 'tooltip') {\n return role.value\n }\n return undefined\n})\n\nconst ariaExpanded = computed<string | undefined>(() => {\n return ariaHaspopup.value ? `${props.open}` : undefined\n})\n\nlet virtualTriggerAriaStopWatch: WatchStopHandle | undefined = undefined\n\nconst TRIGGER_ELE_EVENTS = [\n 'onMouseenter',\n 'onMouseleave',\n 'onClick',\n 'onKeydown',\n 'onFocus',\n 'onBlur',\n 'onContextmenu',\n] as const\n\nonMounted(() => {\n watch(\n () => props.virtualRef,\n (virtualEl) => {\n if (virtualEl) {\n triggerRef.value = unrefElement(virtualEl as HTMLElement)\n }\n },\n {\n immediate: true,\n }\n )\n\n watch(\n triggerRef,\n (el, prevEl) => {\n virtualTriggerAriaStopWatch?.()\n virtualTriggerAriaStopWatch = undefined\n\n if (isElement(prevEl)) {\n TRIGGER_ELE_EVENTS.forEach((eventName) => {\n const handler = props[eventName]\n if (handler) {\n // @ts-ignore\n ;(prevEl as HTMLElement).removeEventListener(\n eventName.slice(2).toLowerCase(),\n handler,\n ['onFocus', 'onBlur'].includes(eventName)\n )\n }\n })\n }\n if (isElement(el)) {\n TRIGGER_ELE_EVENTS.forEach((eventName) => {\n const handler = props[eventName]\n if (handler) {\n // It's not worth doing type gymnastics here\n // @ts-ignore\n ;(el as HTMLElement).addEventListener(\n eventName.slice(2).toLowerCase(),\n handler,\n ['onFocus', 'onBlur'].includes(eventName)\n )\n }\n })\n if (isFocusable(el as HTMLElement)) {\n virtualTriggerAriaStopWatch = watch(\n [ariaControls, ariaDescribedby, ariaHaspopup, ariaExpanded],\n (watches) => {\n ;[\n 'aria-controls',\n 'aria-describedby',\n 'aria-haspopup',\n 'aria-expanded',\n ].forEach((key, idx) => {\n isNil(watches[idx])\n ? el.removeAttribute(key)\n : el.setAttribute(key, watches[idx]!)\n })\n },\n { immediate: true }\n )\n }\n }\n if (isElement(prevEl) && isFocusable(prevEl as HTMLElement)) {\n ;[\n 'aria-controls',\n 'aria-describedby',\n 'aria-haspopup',\n 'aria-expanded',\n ].forEach((key) => prevEl.removeAttribute(key))\n }\n },\n {\n immediate: true,\n }\n )\n})\n\nonBeforeUnmount(() => {\n virtualTriggerAriaStopWatch?.()\n virtualTriggerAriaStopWatch = undefined\n if (triggerRef.value && isElement(triggerRef.value)) {\n const el = triggerRef.value as HTMLElement\n TRIGGER_ELE_EVENTS.forEach((eventName) => {\n const handler = props[eventName]\n if (handler) {\n // @ts-ignore\n el.removeEventListener(\n eventName.slice(2).toLowerCase(),\n handler,\n ['onFocus', 'onBlur'].includes(eventName)\n )\n }\n })\n triggerRef.value = undefined\n }\n})\n\ndefineExpose({\n /**\n * @description trigger element\n */\n triggerRef,\n})\n</script>\n"],"mappings":""}
+57
View File
@@ -0,0 +1,57 @@
Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
const require_runtime = require('../../../_virtual/_rolldown/runtime.js');
let _vueuse_core = require("@vueuse/core");
//#region ../../packages/components/popper/src/utils.ts
const buildPopperOptions = (props, modifiers = []) => {
const { placement, strategy, popperOptions } = props;
const options = {
placement,
strategy,
...popperOptions,
modifiers: [...genModifiers(props), ...modifiers]
};
deriveExtraModifiers(options, popperOptions?.modifiers);
return options;
};
const unwrapMeasurableEl = ($el) => {
if (!_vueuse_core.isClient) return;
return (0, _vueuse_core.unrefElement)($el);
};
function genModifiers(options) {
const { offset, gpuAcceleration, fallbackPlacements } = options;
return [
{
name: "offset",
options: { offset: [0, offset ?? 12] }
},
{
name: "preventOverflow",
options: { padding: {
top: 0,
bottom: 0,
left: 0,
right: 0
} }
},
{
name: "flip",
options: {
padding: 5,
fallbackPlacements
}
},
{
name: "computeStyles",
options: { gpuAcceleration }
}
];
}
function deriveExtraModifiers(options, modifiers) {
if (modifiers) options.modifiers = [...options.modifiers, ...modifiers ?? []];
}
//#endregion
exports.buildPopperOptions = buildPopperOptions;
exports.unwrapMeasurableEl = unwrapMeasurableEl;
//# sourceMappingURL=utils.js.map
@@ -0,0 +1 @@
{"version":3,"file":"utils.js","names":["isClient"],"sources":["../../../../../../packages/components/popper/src/utils.ts"],"sourcesContent":["import { unrefElement } from '@vueuse/core'\nimport { isClient } from '@element-plus/utils'\n\nimport type { ComponentPublicInstance } from 'vue'\nimport type { MaybeRef } from '@vueuse/core'\nimport type { Modifier } from '@popperjs/core'\nimport type { Measurable } from './constants'\nimport type { PopperCoreConfigProps } from './content'\n\nexport const buildPopperOptions = (\n props: PopperCoreConfigProps,\n modifiers: Modifier<any, any>[] = []\n) => {\n const { placement, strategy, popperOptions } = props\n const options = {\n placement,\n strategy,\n ...popperOptions,\n modifiers: [...genModifiers(props), ...modifiers],\n }\n\n deriveExtraModifiers(options, popperOptions?.modifiers)\n return options\n}\n\nexport const unwrapMeasurableEl = (\n $el: MaybeRef<Measurable | undefined | ComponentPublicInstance>\n) => {\n if (!isClient) return\n return unrefElement($el as HTMLElement)\n}\n\nfunction genModifiers(options: PopperCoreConfigProps) {\n const { offset, gpuAcceleration, fallbackPlacements } = options\n return [\n {\n name: 'offset',\n options: {\n offset: [0, offset ?? 12],\n },\n },\n {\n name: 'preventOverflow',\n options: {\n padding: {\n top: 0,\n bottom: 0,\n left: 0,\n right: 0,\n },\n },\n },\n {\n name: 'flip',\n options: {\n padding: 5,\n fallbackPlacements,\n },\n },\n {\n name: 'computeStyles',\n options: {\n gpuAcceleration,\n },\n },\n ]\n}\n\nfunction deriveExtraModifiers(\n options: any,\n modifiers: NonNullable<PopperCoreConfigProps['popperOptions']>['modifiers']\n) {\n if (modifiers) {\n options.modifiers = [...options.modifiers, ...(modifiers ?? [])]\n }\n}\n"],"mappings":";;;;;AASA,MAAa,sBACX,OACA,YAAkC,EAAE,KACjC;CACH,MAAM,EAAE,WAAW,UAAU,kBAAkB;CAC/C,MAAM,UAAU;EACd;EACA;EACA,GAAG;EACH,WAAW,CAAC,GAAG,aAAa,MAAM,EAAE,GAAG,UAAU;EAClD;AAED,sBAAqB,SAAS,eAAe,UAAU;AACvD,QAAO;;AAGT,MAAa,sBACX,QACG;AACH,KAAI,CAACA,sBAAU;AACf,uCAAoB,IAAmB;;AAGzC,SAAS,aAAa,SAAgC;CACpD,MAAM,EAAE,QAAQ,iBAAiB,uBAAuB;AACxD,QAAO;EACL;GACE,MAAM;GACN,SAAS,EACP,QAAQ,CAAC,GAAG,UAAU,GAAG,EAC1B;GACF;EACD;GACE,MAAM;GACN,SAAS,EACP,SAAS;IACP,KAAK;IACL,QAAQ;IACR,MAAM;IACN,OAAO;IACR,EACF;GACF;EACD;GACE,MAAM;GACN,SAAS;IACP,SAAS;IACT;IACD;GACF;EACD;GACE,MAAM;GACN,SAAS,EACP,iBACD;GACF;EACF;;AAGH,SAAS,qBACP,SACA,WACA;AACA,KAAI,UACF,SAAQ,YAAY,CAAC,GAAG,QAAQ,WAAW,GAAI,aAAa,EAAE,CAAE"}
@@ -0,0 +1,3 @@
Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
require('../../base/style/css.js');
require("element-plus/theme-chalk/el-popper.css");
@@ -0,0 +1,3 @@
Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
require('../../base/style/index.js');
require("element-plus/theme-chalk/src/popper.scss");