first commit
This commit is contained in:
root
+17
@@ -0,0 +1,17 @@
|
||||
import { SFCWithInstall } from "../../utils/vue/typescript.js";
|
||||
import "../../utils/index.js";
|
||||
import { Effect, PopperEffect, PopperInstance, PopperProps, PopperPropsPublic, PopperTrigger, UsePopperProps, popperProps, roleTypes, usePopperProps } from "./src/popper.js";
|
||||
import { ElPopperContentInjectionContext, ElPopperInjectionContext, Measurable, POPPER_CONTENT_INJECTION_KEY, POPPER_INJECTION_KEY } from "./src/constants.js";
|
||||
import { _default as _default$3 } from "./src/popper.vue.js";
|
||||
import { _default } from "./src/arrow.vue.js";
|
||||
import { ElPopperArrowTrigger, PopperTriggerInstance, PopperTriggerProps, popperTriggerProps, usePopperTriggerProps } from "./src/trigger.js";
|
||||
import { _default as _default$2 } from "./src/trigger.vue.js";
|
||||
import { ElPopperArrowInstance, PopperArrowInstance, PopperArrowProps, PopperArrowPropsPublic, UsePopperArrowProps, popperArrowProps, popperArrowPropsDefaults, usePopperArrowProps } from "./src/arrow.js";
|
||||
import { CreatePopperInstanceParams, ElPopperArrowContent, PopperContentEmits, PopperContentInstance, PopperContentProps, PopperContentPropsPublic, PopperCoreConfigProps, PopperCoreConfigPropsPublic, UsePopperContentProps, UsePopperCoreConfigProps, popperContentEmits, popperContentProps, popperContentPropsDefaults, popperCoreConfigProps, popperCoreConfigPropsDefaults, usePopperContentEmits, usePopperContentProps, usePopperCoreConfigProps } from "./src/content.js";
|
||||
import { _default as _default$1 } from "./src/content.vue.js";
|
||||
import { Options, Placement } from "@popperjs/core";
|
||||
|
||||
//#region ../../packages/components/popper/index.d.ts
|
||||
declare const ElPopper: SFCWithInstall<typeof _default$3>;
|
||||
//#endregion
|
||||
export { CreatePopperInstanceParams, Effect, ElPopper, ElPopper as default, _default as ElPopperArrow, ElPopperArrowContent, ElPopperArrowInstance, ElPopperArrowTrigger, _default$1 as ElPopperContent, ElPopperContentInjectionContext, ElPopperInjectionContext, _default$2 as ElPopperTrigger, Measurable, type Options, POPPER_CONTENT_INJECTION_KEY, POPPER_INJECTION_KEY, type Placement, PopperArrowInstance, PopperArrowProps, PopperArrowPropsPublic, PopperContentEmits, PopperContentInstance, PopperContentProps, PopperContentPropsPublic, PopperCoreConfigProps, PopperCoreConfigPropsPublic, PopperEffect, PopperInstance, PopperProps, PopperPropsPublic, PopperTrigger, PopperTriggerInstance, PopperTriggerProps, UsePopperArrowProps, UsePopperContentProps, UsePopperCoreConfigProps, UsePopperProps, popperArrowProps, popperArrowPropsDefaults, popperContentEmits, popperContentProps, popperContentPropsDefaults, popperCoreConfigProps, popperCoreConfigPropsDefaults, popperProps, popperTriggerProps, roleTypes, usePopperArrowProps, usePopperContentEmits, usePopperContentProps, usePopperCoreConfigProps, usePopperProps, usePopperTriggerProps };
|
||||
+17
@@ -0,0 +1,17 @@
|
||||
import { withInstall } from "../../utils/vue/install.mjs";
|
||||
import { Effect, popperProps, roleTypes, usePopperProps } from "./src/popper.mjs";
|
||||
import { POPPER_CONTENT_INJECTION_KEY, POPPER_INJECTION_KEY } from "./src/constants.mjs";
|
||||
import popper_default from "./src/popper2.mjs";
|
||||
import arrow_default from "./src/arrow2.mjs";
|
||||
import { popperTriggerProps, usePopperTriggerProps } from "./src/trigger.mjs";
|
||||
import trigger_default from "./src/trigger2.mjs";
|
||||
import { popperArrowProps, popperArrowPropsDefaults, usePopperArrowProps } from "./src/arrow.mjs";
|
||||
import { popperContentEmits, popperContentProps, popperContentPropsDefaults, popperCoreConfigProps, popperCoreConfigPropsDefaults, usePopperContentEmits, usePopperContentProps, usePopperCoreConfigProps } from "./src/content.mjs";
|
||||
import content_default from "./src/content2.mjs";
|
||||
|
||||
//#region ../../packages/components/popper/index.ts
|
||||
const ElPopper = withInstall(popper_default);
|
||||
|
||||
//#endregion
|
||||
export { Effect, ElPopper, ElPopper as default, arrow_default as ElPopperArrow, content_default as ElPopperContent, trigger_default as ElPopperTrigger, POPPER_CONTENT_INJECTION_KEY, POPPER_INJECTION_KEY, popperArrowProps, popperArrowPropsDefaults, popperContentEmits, popperContentProps, popperContentPropsDefaults, popperCoreConfigProps, popperCoreConfigPropsDefaults, popperProps, popperTriggerProps, roleTypes, usePopperArrowProps, usePopperContentEmits, usePopperContentProps, usePopperCoreConfigProps, usePopperProps, usePopperTriggerProps };
|
||||
//# sourceMappingURL=index.mjs.map
|
||||
+1
@@ -0,0 +1 @@
|
||||
{"version":3,"file":"index.mjs","names":["Popper"],"sources":["../../../../../packages/components/popper/index.ts"],"sourcesContent":["import { withInstall } from '@element-plus/utils'\nimport Popper from './src/popper.vue'\nimport ElPopperArrow from './src/arrow.vue'\nimport ElPopperTrigger from './src/trigger.vue'\nimport ElPopperContent from './src/content.vue'\n\nimport type { SFCWithInstall } from '@element-plus/utils'\n\nexport { ElPopperArrow, ElPopperTrigger, ElPopperContent }\n\nexport const ElPopper: SFCWithInstall<typeof Popper> = withInstall(Popper)\nexport default ElPopper\n\nexport * from './src/popper'\nexport * from './src/trigger'\nexport * from './src/content'\nexport * from './src/arrow'\nexport * from './src/constants'\n\nexport type { Placement, Options } from '@popperjs/core'\n"],"mappings":";;;;;;;;;;;;AAUA,MAAa,WAA0C,YAAYA,eAAO"}
|
||||
+36
@@ -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 };
|
||||
+17
@@ -0,0 +1,17 @@
|
||||
import { buildProps } from "../../../utils/vue/props/runtime.mjs";
|
||||
|
||||
//#region ../../packages/components/popper/src/arrow.ts
|
||||
/**
|
||||
* @deprecated Removed after 3.0.0, Use `PopperArrowProps` instead.
|
||||
*/
|
||||
const popperArrowProps = 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
|
||||
export { popperArrowProps, popperArrowPropsDefaults, usePopperArrowProps };
|
||||
//# sourceMappingURL=arrow.mjs.map
|
||||
+1
@@ -0,0 +1 @@
|
||||
{"version":3,"file":"arrow.mjs","names":[],"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,mBAAmB,WAAW,EACzC,aAAa;CACX,MAAM;CACN,SAAS;CACV,EACF,CAAU;AASX,MAAa,2BAA2B,EACtC,aAAa,GACd;;AAKD,MAAa,sBAAsB"}
|
||||
+12
@@ -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 };
|
||||
Generated
Vendored
+31
@@ -0,0 +1,31 @@
|
||||
import { useNamespace } from "../../../hooks/use-namespace/index.mjs";
|
||||
import { POPPER_CONTENT_INJECTION_KEY } from "./constants.mjs";
|
||||
import { createElementBlock, defineComponent, inject, normalizeClass, normalizeStyle, onBeforeUnmount, openBlock, unref } from "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__ */ defineComponent({
|
||||
name: "ElPopperArrow",
|
||||
inheritAttrs: false,
|
||||
__name: "arrow",
|
||||
setup(__props, { expose: __expose }) {
|
||||
const ns = useNamespace("popper");
|
||||
const { arrowRef, arrowStyle } = inject(POPPER_CONTENT_INJECTION_KEY, void 0);
|
||||
onBeforeUnmount(() => {
|
||||
arrowRef.value = void 0;
|
||||
});
|
||||
__expose({ arrowRef });
|
||||
return (_ctx, _cache) => {
|
||||
return openBlock(), createElementBlock("span", {
|
||||
ref_key: "arrowRef",
|
||||
ref: arrowRef,
|
||||
class: normalizeClass(unref(ns).e("arrow")),
|
||||
style: normalizeStyle(unref(arrowStyle)),
|
||||
"data-popper-arrow": ""
|
||||
}, null, 6);
|
||||
};
|
||||
}
|
||||
});
|
||||
|
||||
//#endregion
|
||||
export { arrow_vue_vue_type_script_setup_true_lang_default as default };
|
||||
//# sourceMappingURL=arrow.vue_vue_type_script_setup_true_lang.mjs.map
|
||||
Generated
Vendored
+1
@@ -0,0 +1 @@
|
||||
{"version":3,"file":"arrow.vue_vue_type_script_setup_true_lang.mjs","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,aAAa,SAAQ;EAChC,MAAM,EAAE,UAAU,eAAe,OAC/B,8BACA,OACD;AAED,wBAAsB;AACpB,YAAS,QAAQ;IAClB;AAED,WAAa,EAIX,UACD,CAAA;;uBAjCC,mBAKE,QAAA;aAJI;IAAJ,KAAI;IACH,OAAK,eAAE,MAAA,GAAE,CAAC,EAAC,QAAA,CAAA;IACX,OAAK,eAAE,MAAA,WAAU,CAAA;IAClB,qBAAA"}
|
||||
+8
@@ -0,0 +1,8 @@
|
||||
import arrow_vue_vue_type_script_setup_true_lang_default from "./arrow.vue_vue_type_script_setup_true_lang.mjs";
|
||||
|
||||
//#region ../../packages/components/popper/src/arrow.vue
|
||||
var arrow_default = arrow_vue_vue_type_script_setup_true_lang_default;
|
||||
|
||||
//#endregion
|
||||
export { arrow_default as default };
|
||||
//# sourceMappingURL=arrow2.mjs.map
|
||||
+1
@@ -0,0 +1 @@
|
||||
{"version":3,"file":"arrow2.mjs","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":""}
|
||||
Generated
Vendored
+4
@@ -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 };
|
||||
Generated
Vendored
+5
@@ -0,0 +1,5 @@
|
||||
import { usePopperContent } from "./use-content.mjs";
|
||||
import { usePopperContentDOM } from "./use-content-dom.mjs";
|
||||
import { usePopperContentFocusTrap } from "./use-focus-trap.mjs";
|
||||
|
||||
export { usePopperContent, usePopperContentDOM, usePopperContentFocusTrap };
|
||||
Generated
Vendored
+50
@@ -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 };
|
||||
Generated
Vendored
+43
@@ -0,0 +1,43 @@
|
||||
import { isNumber } from "../../../../utils/types.mjs";
|
||||
import { useNamespace } from "../../../../hooks/use-namespace/index.mjs";
|
||||
import { useZIndex } from "../../../../hooks/use-z-index/index.mjs";
|
||||
import { computed, ref, unref } from "vue";
|
||||
|
||||
//#region ../../packages/components/popper/src/composables/use-content-dom.ts
|
||||
const usePopperContentDOM = (props, { attributes, styles, role }) => {
|
||||
const { nextZIndex } = useZIndex();
|
||||
const ns = useNamespace("popper");
|
||||
const contentAttrs = computed(() => unref(attributes).popper);
|
||||
const contentZIndex = ref(isNumber(props.zIndex) ? props.zIndex : nextZIndex());
|
||||
const contentClass = computed(() => [
|
||||
ns.b(),
|
||||
ns.is("pure", props.pure),
|
||||
ns.is(props.effect),
|
||||
props.popperClass
|
||||
]);
|
||||
const contentStyle = computed(() => {
|
||||
return [
|
||||
{ zIndex: unref(contentZIndex) },
|
||||
unref(styles).popper,
|
||||
props.popperStyle || {}
|
||||
];
|
||||
});
|
||||
const ariaModal = computed(() => role.value === "dialog" ? "false" : void 0);
|
||||
const arrowStyle = computed(() => unref(styles).arrow || {});
|
||||
const updateZIndex = () => {
|
||||
contentZIndex.value = isNumber(props.zIndex) ? props.zIndex : nextZIndex();
|
||||
};
|
||||
return {
|
||||
ariaModal,
|
||||
arrowStyle,
|
||||
contentAttrs,
|
||||
contentClass,
|
||||
contentStyle,
|
||||
contentZIndex,
|
||||
updateZIndex
|
||||
};
|
||||
};
|
||||
|
||||
//#endregion
|
||||
export { usePopperContentDOM };
|
||||
//# sourceMappingURL=use-content-dom.mjs.map
|
||||
Generated
Vendored
+1
@@ -0,0 +1 @@
|
||||
{"version":3,"file":"use-content-dom.mjs","names":[],"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,eAAe,WAAW;CAClC,MAAM,KAAK,aAAa,SAAS;CAEjC,MAAM,eAAe,eAAe,MAAM,WAAW,CAAC,OAAO;CAC7D,MAAM,gBAAgB,IACpB,SAAS,MAAM,OAAO,GAAG,MAAM,SAAS,YAAY,CACrD;CACD,MAAM,eAAe,eAAe;EAClC,GAAG,GAAG;EACN,GAAG,GAAG,QAAQ,MAAM,KAAK;EACzB,GAAG,GAAG,MAAM,OAAQ;EACpB,MAAM;EACP,CAAC;CACF,MAAM,eAAe,eAA6B;AAChD,SAAO;GACL,EAAE,QAAQ,MAAM,cAAc,EAAE;GAChC,MAAM,OAAO,CAAC;GACd,MAAM,eAAe,EAAE;GACxB;GACD;CACF,MAAM,YAAY,eAChB,KAAK,UAAU,WAAW,UAAU,OACrC;CACD,MAAM,aAAa,eACV,MAAM,OAAO,CAAC,SAAS,EAAE,CACjC;CAED,MAAM,qBAAqB;AACzB,gBAAc,QAAQ,SAAS,MAAM,OAAO,GAAG,MAAM,SAAS,YAAY;;AAG5E,QAAO;EACL;EACA;EACA;EACA;EACA;EACA;EAEA;EACD"}
|
||||
Generated
Vendored
+83
@@ -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?: {
|
||||
"bottom-start"?: _popperjs_core0.Offsets | undefined;
|
||||
bottom?: _popperjs_core0.Offsets | undefined;
|
||||
auto?: _popperjs_core0.Offsets | undefined;
|
||||
"auto-start"?: _popperjs_core0.Offsets | undefined;
|
||||
"auto-end"?: _popperjs_core0.Offsets | undefined;
|
||||
top?: _popperjs_core0.Offsets | undefined;
|
||||
right?: _popperjs_core0.Offsets | undefined;
|
||||
left?: _popperjs_core0.Offsets | undefined;
|
||||
"top-start"?: _popperjs_core0.Offsets | undefined;
|
||||
"top-end"?: _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 };
|
||||
Generated
Vendored
+74
@@ -0,0 +1,74 @@
|
||||
import { usePopper } from "../../../../hooks/use-popper/index.mjs";
|
||||
import { POPPER_INJECTION_KEY } from "../constants.mjs";
|
||||
import { buildPopperOptions, unwrapMeasurableEl } from "../utils.mjs";
|
||||
import { useResizeObserver } from "@vueuse/core";
|
||||
import { isUndefined } from "lodash-unified";
|
||||
import { computed, inject, onBeforeUnmount, onMounted, ref, unref, watch } from "vue";
|
||||
|
||||
//#region ../../packages/components/popper/src/composables/use-content.ts
|
||||
const DEFAULT_ARROW_OFFSET = 0;
|
||||
const usePopperContent = (props) => {
|
||||
const { popperInstanceRef, contentRef, triggerRef, role } = inject(POPPER_INJECTION_KEY, void 0);
|
||||
const arrowRef = ref();
|
||||
const arrowOffset = computed(() => props.arrowOffset);
|
||||
const eventListenerModifier = computed(() => {
|
||||
return {
|
||||
name: "eventListeners",
|
||||
enabled: !!props.visible
|
||||
};
|
||||
});
|
||||
const arrowModifier = computed(() => {
|
||||
const arrowEl = unref(arrowRef);
|
||||
const offset = unref(arrowOffset) ?? DEFAULT_ARROW_OFFSET;
|
||||
return {
|
||||
name: "arrow",
|
||||
enabled: !isUndefined(arrowEl),
|
||||
options: {
|
||||
element: arrowEl,
|
||||
padding: offset
|
||||
}
|
||||
};
|
||||
});
|
||||
const options = computed(() => {
|
||||
return {
|
||||
onFirstUpdate: () => {
|
||||
update();
|
||||
},
|
||||
...buildPopperOptions(props, [unref(arrowModifier), unref(eventListenerModifier)])
|
||||
};
|
||||
});
|
||||
const computedReference = computed(() => unwrapMeasurableEl(props.referenceEl) || unref(triggerRef));
|
||||
const { attributes, state, styles, update, forceUpdate, instanceRef } = usePopper(computedReference, contentRef, options);
|
||||
watch(instanceRef, (instance) => popperInstanceRef.value = instance, { flush: "sync" });
|
||||
onMounted(() => {
|
||||
watch(() => unref(computedReference)?.getBoundingClientRect?.(), () => {
|
||||
update();
|
||||
});
|
||||
});
|
||||
let stopResizeObserver;
|
||||
watch(() => props.visible, (visible) => {
|
||||
stopResizeObserver?.();
|
||||
stopResizeObserver = void 0;
|
||||
if (visible) stopResizeObserver = useResizeObserver(contentRef, update).stop;
|
||||
});
|
||||
onBeforeUnmount(() => {
|
||||
popperInstanceRef.value = void 0;
|
||||
stopResizeObserver?.();
|
||||
stopResizeObserver = void 0;
|
||||
});
|
||||
return {
|
||||
attributes,
|
||||
arrowRef,
|
||||
contentRef,
|
||||
instanceRef,
|
||||
state,
|
||||
styles,
|
||||
role,
|
||||
forceUpdate,
|
||||
update
|
||||
};
|
||||
};
|
||||
|
||||
//#endregion
|
||||
export { usePopperContent };
|
||||
//# sourceMappingURL=use-content.mjs.map
|
||||
Generated
Vendored
+1
@@ -0,0 +1 @@
|
||||
{"version":3,"file":"use-content.mjs","names":[],"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,SAAS,OAC1D,sBACA,OACD;CAED,MAAM,WAAW,KAAkB;CACnC,MAAM,cAAc,eAAe,MAAM,YAAY;CAErD,MAAM,wBAAwB,eAAe;AAC3C,SAAO;GACL,MAAM;GACN,SAAS,CAAC,CAAC,MAAM;GAClB;GACD;CAEF,MAAM,gBAAgB,eAAe;EACnC,MAAM,UAAU,MAAM,SAAS;EAC/B,MAAM,SAAS,MAAM,YAAY,IAAI;AAIrC,SAAO;GACL,MAAM;GACN,SAAS,CAAC,YAAY,QAAQ;GAC9B,SAAS;IACP,SAAS;IACT,SAAS;IACV;GACF;GACD;CAEF,MAAM,UAAU,eAA+B;AAC7C,SAAO;GACL,qBAAqB;AACnB,YAAQ;;GAEV,GAAG,mBAAmB,OAAO,CAC3B,MAAM,cAAc,EACpB,MAAM,sBAAsB,CAC7B,CAAC;GACH;GACD;CAEF,MAAM,oBAAoB,eAClB,mBAAmB,MAAM,YAAY,IAAI,MAAM,WAAW,CACjE;CAED,MAAM,EAAE,YAAY,OAAO,QAAQ,QAAQ,aAAa,gBACtD,UAAU,mBAAmB,YAAY,QAAQ;AAEnD,OAAM,cAAc,aAAc,kBAAkB,QAAQ,UAAW,EACrE,OAAO,QACR,CAAC;AAEF,iBAAgB;AACd,cACQ,MAAM,kBAAkB,EAAE,yBAAyB,QACnD;AACJ,WAAQ;IAEX;GACD;CAGF,IAAI;AACJ,aACQ,MAAM,UACX,YAAY;AACX,wBAAsB;AACtB,uBAAqB;AACrB,MAAI,QACF,sBAAqB,kBAAkB,YAAY,OAAO,CAAC;GAGhE;AAED,uBAAsB;AACpB,oBAAkB,QAAQ;AAC1B,wBAAsB;AACtB,uBAAqB;GACrB;AAEF,QAAO;EACL;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;EACA;EACD"}
|
||||
Generated
Vendored
+17
@@ -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 | "container" | "first" | undefined, HTMLElement | "container" | "first" | 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 };
|
||||
Generated
Vendored
+48
@@ -0,0 +1,48 @@
|
||||
import { onBeforeUnmount, ref } from "vue";
|
||||
|
||||
//#region ../../packages/components/popper/src/composables/use-focus-trap.ts
|
||||
const usePopperContentFocusTrap = (props, emit) => {
|
||||
const trapped = ref(false);
|
||||
const focusStartRef = 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");
|
||||
};
|
||||
onBeforeUnmount(() => {
|
||||
focusStartRef.value = void 0;
|
||||
});
|
||||
return {
|
||||
focusStartRef,
|
||||
trapped,
|
||||
onFocusAfterReleased,
|
||||
onFocusAfterTrapped,
|
||||
onFocusInTrap,
|
||||
onFocusoutPrevented,
|
||||
onReleaseRequested
|
||||
};
|
||||
};
|
||||
|
||||
//#endregion
|
||||
export { usePopperContentFocusTrap };
|
||||
//# sourceMappingURL=use-focus-trap.mjs.map
|
||||
Generated
Vendored
+1
@@ -0,0 +1 @@
|
||||
{"version":3,"file":"use-focus-trap.mjs","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,UAAU,IAAI,MAAM;CAC1B,MAAM,gBAAgB,KAA0C;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,uBAAsB;AACpB,gBAAc,QAAQ;GACtB;AAEF,QAAO;EACL;EACA;EAEA;EACA;EACA;EACA;EACA;EACD"}
|
||||
+27
@@ -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 };
|
||||
+7
@@ -0,0 +1,7 @@
|
||||
//#region ../../packages/components/popper/src/constants.ts
|
||||
const POPPER_INJECTION_KEY = Symbol("popper");
|
||||
const POPPER_CONTENT_INJECTION_KEY = Symbol("popperContent");
|
||||
|
||||
//#endregion
|
||||
export { POPPER_CONTENT_INJECTION_KEY, POPPER_INJECTION_KEY };
|
||||
//# sourceMappingURL=constants.mjs.map
|
||||
+1
@@ -0,0 +1 @@
|
||||
{"version":3,"file":"constants.mjs","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"}
|
||||
+260
@@ -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, "absolute" | "fixed", 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, "absolute" | "fixed", 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, "absolute" | "fixed", 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, "absolute" | "fixed", 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 };
|
||||
+132
@@ -0,0 +1,132 @@
|
||||
import { buildProps, definePropType } from "../../../utils/vue/props/runtime.mjs";
|
||||
import { useAriaProps } from "../../../hooks/use-aria/index.mjs";
|
||||
import { popperArrowProps, popperArrowPropsDefaults } from "./arrow.mjs";
|
||||
import { placements } from "@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 = buildProps({
|
||||
boundariesPadding: {
|
||||
type: Number,
|
||||
default: 0
|
||||
},
|
||||
fallbackPlacements: {
|
||||
type: definePropType(Array),
|
||||
default: void 0
|
||||
},
|
||||
gpuAcceleration: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
offset: {
|
||||
type: Number,
|
||||
default: 12
|
||||
},
|
||||
placement: {
|
||||
type: String,
|
||||
values: placements,
|
||||
default: "bottom"
|
||||
},
|
||||
popperOptions: {
|
||||
type: definePropType(Object),
|
||||
default: () => ({})
|
||||
},
|
||||
strategy: {
|
||||
type: String,
|
||||
values: POSITIONING_STRATEGIES,
|
||||
default: "absolute"
|
||||
}
|
||||
});
|
||||
/**
|
||||
* @deprecated Removed after 3.0.0, Use `PopperContentProps` instead.
|
||||
*/
|
||||
const popperContentProps = buildProps({
|
||||
...popperCoreConfigProps,
|
||||
...popperArrowProps,
|
||||
id: String,
|
||||
style: { type: definePropType([
|
||||
String,
|
||||
Array,
|
||||
Object
|
||||
]) },
|
||||
className: { type: definePropType([
|
||||
String,
|
||||
Array,
|
||||
Object
|
||||
]) },
|
||||
effect: {
|
||||
type: definePropType(String),
|
||||
default: "dark"
|
||||
},
|
||||
visible: Boolean,
|
||||
enterable: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
pure: Boolean,
|
||||
focusOnShow: Boolean,
|
||||
trapping: Boolean,
|
||||
popperClass: { type: definePropType([
|
||||
String,
|
||||
Array,
|
||||
Object
|
||||
]) },
|
||||
popperStyle: { type: definePropType([
|
||||
String,
|
||||
Array,
|
||||
Object
|
||||
]) },
|
||||
referenceEl: { type: definePropType(Object) },
|
||||
triggerTargetEl: { type: definePropType(Object) },
|
||||
stopPopperMouseEvent: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
virtualTriggering: Boolean,
|
||||
zIndex: Number,
|
||||
...useAriaProps(["ariaLabel"]),
|
||||
loop: Boolean
|
||||
});
|
||||
const popperCoreConfigPropsDefaults = {
|
||||
boundariesPadding: 0,
|
||||
gpuAcceleration: true,
|
||||
offset: 12,
|
||||
placement: "bottom",
|
||||
popperOptions: () => ({}),
|
||||
strategy: "absolute"
|
||||
};
|
||||
const popperContentPropsDefaults = {
|
||||
...popperCoreConfigPropsDefaults,
|
||||
...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
|
||||
export { popperContentEmits, popperContentProps, popperContentPropsDefaults, popperCoreConfigProps, popperCoreConfigPropsDefaults, usePopperContentEmits, usePopperContentProps, usePopperCoreConfigProps };
|
||||
//# sourceMappingURL=content.mjs.map
|
||||
+1
File diff suppressed because one or more lines are too long
+70
@@ -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;
|
||||
}>, {
|
||||
effect: PopperEffect;
|
||||
placement: Placement$1;
|
||||
popperStyle: string | false | vue.CSSProperties | vue.StyleValue[] | null;
|
||||
visible: boolean;
|
||||
style: string | false | vue.CSSProperties | vue.StyleValue[] | null;
|
||||
enterable: boolean;
|
||||
pure: boolean;
|
||||
focusOnShow: boolean;
|
||||
trapping: boolean;
|
||||
stopPopperMouseEvent: boolean;
|
||||
virtualTriggering: boolean;
|
||||
loop: boolean;
|
||||
boundariesPadding: number;
|
||||
gpuAcceleration: boolean;
|
||||
offset: number;
|
||||
popperOptions: Partial<Options$1>;
|
||||
strategy: "absolute" | "fixed";
|
||||
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 };
|
||||
Generated
Vendored
+133
@@ -0,0 +1,133 @@
|
||||
import { isElement } from "../../../utils/types.mjs";
|
||||
import { NOOP } from "../../../utils/functions.mjs";
|
||||
import { POPPER_CONTENT_INJECTION_KEY } from "./constants.mjs";
|
||||
import { popperContentEmits, popperContentProps } from "./content.mjs";
|
||||
import focus_trap_default from "../../focus-trap/index.mjs";
|
||||
import { formItemContextKey } from "../../form/src/constants.mjs";
|
||||
import { usePopperContent } from "./composables/use-content.mjs";
|
||||
import { usePopperContentDOM } from "./composables/use-content-dom.mjs";
|
||||
import { usePopperContentFocusTrap } from "./composables/use-focus-trap.mjs";
|
||||
import { isNil } from "lodash-unified";
|
||||
import { createElementBlock, createVNode, defineComponent, inject, mergeProps, onBeforeUnmount, onMounted, openBlock, provide, renderSlot, unref, watch, withCtx } from "vue";
|
||||
|
||||
//#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__ */ defineComponent({
|
||||
name: "ElPopperContent",
|
||||
__name: "content",
|
||||
props: popperContentProps,
|
||||
emits: popperContentEmits,
|
||||
setup(__props, { expose: __expose, emit: __emit }) {
|
||||
const emit = __emit;
|
||||
const props = __props;
|
||||
const { focusStartRef, trapped, onFocusAfterReleased, onFocusAfterTrapped, onFocusInTrap, onFocusoutPrevented, onReleaseRequested } = usePopperContentFocusTrap(props, emit);
|
||||
const { attributes, arrowRef, contentRef, styles, instanceRef, role, update } = usePopperContent(props);
|
||||
const { ariaModal, arrowStyle, contentAttrs, contentClass, contentStyle, updateZIndex } = usePopperContentDOM(props, {
|
||||
styles,
|
||||
attributes,
|
||||
role
|
||||
});
|
||||
const formItemContext = inject(formItemContextKey, void 0);
|
||||
provide(POPPER_CONTENT_INJECTION_KEY, {
|
||||
arrowStyle,
|
||||
arrowRef
|
||||
});
|
||||
if (formItemContext) provide(formItemContextKey, {
|
||||
...formItemContext,
|
||||
addInputId: NOOP,
|
||||
removeInputId: 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;
|
||||
};
|
||||
onMounted(() => {
|
||||
watch(() => props.triggerTargetEl, (triggerTargetEl, prevTriggerTargetEl) => {
|
||||
triggerTargetAriaStopWatch?.();
|
||||
triggerTargetAriaStopWatch = void 0;
|
||||
const el = unref(triggerTargetEl || contentRef.value);
|
||||
const prevEl = unref(prevTriggerTargetEl || contentRef.value);
|
||||
if (isElement(el)) triggerTargetAriaStopWatch = watch([
|
||||
role,
|
||||
() => props.ariaLabel,
|
||||
ariaModal,
|
||||
() => props.id
|
||||
], (watches) => {
|
||||
[
|
||||
"role",
|
||||
"aria-label",
|
||||
"aria-modal",
|
||||
"id"
|
||||
].forEach((key, idx) => {
|
||||
isNil(watches[idx]) ? el.removeAttribute(key) : el.setAttribute(key, watches[idx]);
|
||||
});
|
||||
}, { immediate: true });
|
||||
if (prevEl !== el && isElement(prevEl)) [
|
||||
"role",
|
||||
"aria-label",
|
||||
"aria-modal",
|
||||
"id"
|
||||
].forEach((key) => {
|
||||
prevEl.removeAttribute(key);
|
||||
});
|
||||
}, { immediate: true });
|
||||
watch(() => props.visible, togglePopperAlive, { immediate: true });
|
||||
});
|
||||
onBeforeUnmount(() => {
|
||||
triggerTargetAriaStopWatch?.();
|
||||
triggerTargetAriaStopWatch = void 0;
|
||||
contentRef.value = void 0;
|
||||
});
|
||||
__expose({
|
||||
popperContentRef: contentRef,
|
||||
popperInstanceRef: instanceRef,
|
||||
updatePopper,
|
||||
contentStyle
|
||||
});
|
||||
return (_ctx, _cache) => {
|
||||
return openBlock(), createElementBlock("div", mergeProps({
|
||||
ref_key: "contentRef",
|
||||
ref: contentRef
|
||||
}, unref(contentAttrs), {
|
||||
style: unref(contentStyle),
|
||||
class: unref(contentClass),
|
||||
tabindex: "-1",
|
||||
onMouseenter: _cache[0] || (_cache[0] = (e) => _ctx.$emit("mouseenter", e)),
|
||||
onMouseleave: _cache[1] || (_cache[1] = (e) => _ctx.$emit("mouseleave", e))
|
||||
}), [createVNode(unref(focus_trap_default), {
|
||||
loop: __props.loop,
|
||||
trapped: unref(trapped),
|
||||
"trap-on-focus-in": true,
|
||||
"focus-trap-el": unref(contentRef),
|
||||
"focus-start-el": unref(focusStartRef),
|
||||
onFocusAfterTrapped: unref(onFocusAfterTrapped),
|
||||
onFocusAfterReleased: unref(onFocusAfterReleased),
|
||||
onFocusin: unref(onFocusInTrap),
|
||||
onFocusoutPrevented: unref(onFocusoutPrevented),
|
||||
onReleaseRequested: unref(onReleaseRequested)
|
||||
}, {
|
||||
default: withCtx(() => [renderSlot(_ctx.$slots, "default")]),
|
||||
_: 3
|
||||
}, 8, [
|
||||
"loop",
|
||||
"trapped",
|
||||
"focus-trap-el",
|
||||
"focus-start-el",
|
||||
"onFocusAfterTrapped",
|
||||
"onFocusAfterReleased",
|
||||
"onFocusin",
|
||||
"onFocusoutPrevented",
|
||||
"onReleaseRequested"
|
||||
])], 16);
|
||||
};
|
||||
}
|
||||
});
|
||||
|
||||
//#endregion
|
||||
export { content_vue_vue_type_script_setup_true_lang_default as default };
|
||||
//# sourceMappingURL=content.vue_vue_type_script_setup_true_lang.mjs.map
|
||||
Generated
Vendored
+1
File diff suppressed because one or more lines are too long
+8
@@ -0,0 +1,8 @@
|
||||
import content_vue_vue_type_script_setup_true_lang_default from "./content.vue_vue_type_script_setup_true_lang.mjs";
|
||||
|
||||
//#region ../../packages/components/popper/src/content.vue
|
||||
var content_default = content_vue_vue_type_script_setup_true_lang_default;
|
||||
|
||||
//#endregion
|
||||
export { content_default as default };
|
||||
//# sourceMappingURL=content2.mjs.map
|
||||
+1
@@ -0,0 +1 @@
|
||||
{"version":3,"file":"content2.mjs","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":""}
|
||||
+40
@@ -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, "tooltip" | "dialog" | "grid" | "group" | "listbox" | "menu" | "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, "tooltip" | "dialog" | "grid" | "group" | "listbox" | "menu" | "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 };
|
||||
+31
@@ -0,0 +1,31 @@
|
||||
import { buildProps } from "../../../utils/vue/props/runtime.mjs";
|
||||
|
||||
//#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 = 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
|
||||
export { Effect, popperProps, roleTypes, usePopperProps };
|
||||
//# sourceMappingURL=popper.mjs.map
|
||||
+1
@@ -0,0 +1 @@
|
||||
{"version":3,"file":"popper.mjs","names":[],"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,cAAc,WAAW,EACpC,MAAM;CACJ,MAAM;CACN,QAAQ;CACR,SAAS;CACV,EACF,CAAU;;AAUX,MAAa,iBAAiB"}
|
||||
+21
@@ -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 };
|
||||
Generated
Vendored
+30
@@ -0,0 +1,30 @@
|
||||
import { popperProps } from "./popper.mjs";
|
||||
import { POPPER_INJECTION_KEY } from "./constants.mjs";
|
||||
import { computed, defineComponent, provide, ref, renderSlot } from "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__ */ defineComponent({
|
||||
name: "ElPopper",
|
||||
inheritAttrs: false,
|
||||
__name: "popper",
|
||||
props: popperProps,
|
||||
setup(__props, { expose: __expose }) {
|
||||
const props = __props;
|
||||
const popperProvides = {
|
||||
triggerRef: ref(),
|
||||
popperInstanceRef: ref(),
|
||||
contentRef: ref(),
|
||||
referenceRef: ref(),
|
||||
role: computed(() => props.role)
|
||||
};
|
||||
__expose(popperProvides);
|
||||
provide(POPPER_INJECTION_KEY, popperProvides);
|
||||
return (_ctx, _cache) => {
|
||||
return renderSlot(_ctx.$slots, "default");
|
||||
};
|
||||
}
|
||||
});
|
||||
|
||||
//#endregion
|
||||
export { popper_vue_vue_type_script_setup_true_lang_default as default };
|
||||
//# sourceMappingURL=popper.vue_vue_type_script_setup_true_lang.mjs.map
|
||||
Generated
Vendored
+1
@@ -0,0 +1 @@
|
||||
{"version":3,"file":"popper.vue_vue_type_script_setup_true_lang.mjs","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,YAViB,KAAiB;GAclC,mBAbwB,KAAoB;GAiB5C,YAhBiB,KAAiB;GAoBlC,cAnBmB,KAAiB;GAuBpC,MAtBW,eAAe,MAAM,KAAI;GAuBrC;AAED,WAAa,eAAc;AAE3B,UAAQ,sBAAsB,eAAc;;UAlD1C,WAAQ,KAAA,QAAA,UAAA"}
|
||||
+8
@@ -0,0 +1,8 @@
|
||||
import popper_vue_vue_type_script_setup_true_lang_default from "./popper.vue_vue_type_script_setup_true_lang.mjs";
|
||||
|
||||
//#region ../../packages/components/popper/src/popper.vue
|
||||
var popper_default = popper_vue_vue_type_script_setup_true_lang_default;
|
||||
|
||||
//#endregion
|
||||
export { popper_default as default };
|
||||
//# sourceMappingURL=popper2.mjs.map
|
||||
+1
@@ -0,0 +1 @@
|
||||
{"version":3,"file":"popper2.mjs","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":""}
|
||||
+135
@@ -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 };
|
||||
+25
@@ -0,0 +1,25 @@
|
||||
import { buildProps, definePropType } from "../../../utils/vue/props/runtime.mjs";
|
||||
|
||||
//#region ../../packages/components/popper/src/trigger.ts
|
||||
/**
|
||||
* @deprecated Removed after 3.0.0, Use `PopperTriggerProps` instead.
|
||||
*/
|
||||
const popperTriggerProps = buildProps({
|
||||
virtualRef: { type: definePropType(Object) },
|
||||
virtualTriggering: Boolean,
|
||||
onMouseenter: { type: definePropType(Function) },
|
||||
onMouseleave: { type: definePropType(Function) },
|
||||
onClick: { type: definePropType(Function) },
|
||||
onKeydown: { type: definePropType(Function) },
|
||||
onFocus: { type: definePropType(Function) },
|
||||
onBlur: { type: definePropType(Function) },
|
||||
onContextmenu: { type: definePropType(Function) },
|
||||
id: String,
|
||||
open: Boolean
|
||||
});
|
||||
/** @deprecated use `popperTriggerProps` instead, and it will be deprecated in the next major version */
|
||||
const usePopperTriggerProps = popperTriggerProps;
|
||||
|
||||
//#endregion
|
||||
export { popperTriggerProps, usePopperTriggerProps };
|
||||
//# sourceMappingURL=trigger.mjs.map
|
||||
+1
@@ -0,0 +1 @@
|
||||
{"version":3,"file":"trigger.mjs","names":[],"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,qBAAqB,WAAW;CAE3C,YAAY,EACV,MAAM,eAA2B,OAAO,EACzC;CAED,mBAAmB;CACnB,cAAc,EACZ,MAAM,eAAwC,SAAS,EACxD;CACD,cAAc,EACZ,MAAM,eAAwC,SAAS,EACxD;CACD,SAAS,EACP,MAAM,eAA0C,SAAS,EAC1D;CACD,WAAW,EACT,MAAM,eAA2C,SAAS,EAC3D;CACD,SAAS,EACP,MAAM,eAAwC,SAAS,EACxD;CACD,QAAQ,EACN,MAAM,eAAwC,SAAS,EACxD;CACD,eAAe,EACb,MAAM,eAA0C,SAAS,EAC1D;CACD,IAAI;CACJ,MAAM;CACP,CAAU;;AAKX,MAAa,wBAAwB"}
|
||||
+24
@@ -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 };
|
||||
Generated
Vendored
+117
@@ -0,0 +1,117 @@
|
||||
import { isFocusable } from "../../../utils/dom/aria.mjs";
|
||||
import { isElement } from "../../../utils/types.mjs";
|
||||
import { useForwardRef } from "../../../hooks/use-forward-ref/index.mjs";
|
||||
import { POPPER_INJECTION_KEY } from "./constants.mjs";
|
||||
import { popperTriggerProps } from "./trigger.mjs";
|
||||
import { OnlyChild } from "../../slot/src/only-child.mjs";
|
||||
import { unrefElement } from "@vueuse/core";
|
||||
import { isNil } from "lodash-unified";
|
||||
import { computed, createBlock, createCommentVNode, defineComponent, inject, mergeProps, onBeforeUnmount, onMounted, openBlock, renderSlot, unref, watch, withCtx } from "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__ */ defineComponent({
|
||||
name: "ElPopperTrigger",
|
||||
inheritAttrs: false,
|
||||
__name: "trigger",
|
||||
props: popperTriggerProps,
|
||||
setup(__props, { expose: __expose }) {
|
||||
const props = __props;
|
||||
const { role, triggerRef } = inject(POPPER_INJECTION_KEY, void 0);
|
||||
useForwardRef(triggerRef);
|
||||
const ariaControls = computed(() => {
|
||||
return ariaHaspopup.value ? props.id : void 0;
|
||||
});
|
||||
const ariaDescribedby = computed(() => {
|
||||
if (role && role.value === "tooltip") return props.open && props.id ? props.id : void 0;
|
||||
});
|
||||
const ariaHaspopup = computed(() => {
|
||||
if (role && role.value !== "tooltip") return role.value;
|
||||
});
|
||||
const ariaExpanded = computed(() => {
|
||||
return ariaHaspopup.value ? `${props.open}` : void 0;
|
||||
});
|
||||
let virtualTriggerAriaStopWatch = void 0;
|
||||
const TRIGGER_ELE_EVENTS = [
|
||||
"onMouseenter",
|
||||
"onMouseleave",
|
||||
"onClick",
|
||||
"onKeydown",
|
||||
"onFocus",
|
||||
"onBlur",
|
||||
"onContextmenu"
|
||||
];
|
||||
onMounted(() => {
|
||||
watch(() => props.virtualRef, (virtualEl) => {
|
||||
if (virtualEl) triggerRef.value = unrefElement(virtualEl);
|
||||
}, { immediate: true });
|
||||
watch(triggerRef, (el, prevEl) => {
|
||||
virtualTriggerAriaStopWatch?.();
|
||||
virtualTriggerAriaStopWatch = void 0;
|
||||
if (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 (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 (isFocusable(el)) virtualTriggerAriaStopWatch = watch([
|
||||
ariaControls,
|
||||
ariaDescribedby,
|
||||
ariaHaspopup,
|
||||
ariaExpanded
|
||||
], (watches) => {
|
||||
[
|
||||
"aria-controls",
|
||||
"aria-describedby",
|
||||
"aria-haspopup",
|
||||
"aria-expanded"
|
||||
].forEach((key, idx) => {
|
||||
isNil(watches[idx]) ? el.removeAttribute(key) : el.setAttribute(key, watches[idx]);
|
||||
});
|
||||
}, { immediate: true });
|
||||
}
|
||||
if (isElement(prevEl) && isFocusable(prevEl)) [
|
||||
"aria-controls",
|
||||
"aria-describedby",
|
||||
"aria-haspopup",
|
||||
"aria-expanded"
|
||||
].forEach((key) => prevEl.removeAttribute(key));
|
||||
}, { immediate: true });
|
||||
});
|
||||
onBeforeUnmount(() => {
|
||||
virtualTriggerAriaStopWatch?.();
|
||||
virtualTriggerAriaStopWatch = void 0;
|
||||
if (triggerRef.value && 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 ? (openBlock(), createBlock(unref(OnlyChild), mergeProps({ key: 0 }, _ctx.$attrs, {
|
||||
"aria-controls": ariaControls.value,
|
||||
"aria-describedby": ariaDescribedby.value,
|
||||
"aria-expanded": ariaExpanded.value,
|
||||
"aria-haspopup": ariaHaspopup.value
|
||||
}), {
|
||||
default: withCtx(() => [renderSlot(_ctx.$slots, "default")]),
|
||||
_: 3
|
||||
}, 16, [
|
||||
"aria-controls",
|
||||
"aria-describedby",
|
||||
"aria-expanded",
|
||||
"aria-haspopup"
|
||||
])) : createCommentVNode("v-if", true);
|
||||
};
|
||||
}
|
||||
});
|
||||
|
||||
//#endregion
|
||||
export { trigger_vue_vue_type_script_setup_true_lang_default as default };
|
||||
//# sourceMappingURL=trigger.vue_vue_type_script_setup_true_lang.mjs.map
|
||||
Generated
Vendored
+1
File diff suppressed because one or more lines are too long
+8
@@ -0,0 +1,8 @@
|
||||
import trigger_vue_vue_type_script_setup_true_lang_default from "./trigger.vue_vue_type_script_setup_true_lang.mjs";
|
||||
|
||||
//#region ../../packages/components/popper/src/trigger.vue
|
||||
var trigger_default = trigger_vue_vue_type_script_setup_true_lang_default;
|
||||
|
||||
//#endregion
|
||||
export { trigger_default as default };
|
||||
//# sourceMappingURL=trigger2.mjs.map
|
||||
+1
@@ -0,0 +1 @@
|
||||
{"version":3,"file":"trigger2.mjs","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 = withDefaults(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":""}
|
||||
+55
@@ -0,0 +1,55 @@
|
||||
import { isClient as isClient$1 } from "../../../utils/browser.mjs";
|
||||
import { unrefElement } from "@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 (!isClient$1) return;
|
||||
return 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
|
||||
export { buildPopperOptions, unwrapMeasurableEl };
|
||||
//# sourceMappingURL=utils.mjs.map
|
||||
+1
@@ -0,0 +1 @@
|
||||
{"version":3,"file":"utils.mjs","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,WAAU;AACf,QAAO,aAAa,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"}
|
||||
+2
@@ -0,0 +1,2 @@
|
||||
import "../../base/style/css.mjs";
|
||||
import "element-plus/theme-chalk/el-popper.css";
|
||||
+2
@@ -0,0 +1,2 @@
|
||||
import "../../base/style/index.mjs";
|
||||
import "element-plus/theme-chalk/src/popper.scss";
|
||||
Reference in New Issue
Block a user