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
@@ -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"}