1834 lines
54 KiB
JavaScript
1834 lines
54 KiB
JavaScript
var __defProp = Object.defineProperty;
|
|
var __defProps = Object.defineProperties;
|
|
var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
|
|
var __getOwnPropSymbols = Object.getOwnPropertySymbols;
|
|
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
var __propIsEnum = Object.prototype.propertyIsEnumerable;
|
|
var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
|
|
var __spreadValues = (a, b) => {
|
|
for (var prop in b || (b = {}))
|
|
if (__hasOwnProp.call(b, prop))
|
|
__defNormalProp(a, prop, b[prop]);
|
|
if (__getOwnPropSymbols)
|
|
for (var prop of __getOwnPropSymbols(b)) {
|
|
if (__propIsEnum.call(b, prop))
|
|
__defNormalProp(a, prop, b[prop]);
|
|
}
|
|
return a;
|
|
};
|
|
var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
|
|
import { defineComponent, openBlock, createElementBlock, normalizeClass, renderSlot, normalizeProps, guardReactiveProps, pushScopeId, popScopeId, nextTick, createBlock, withScopeId, resolveComponent, normalizeStyle, withKeys, createElementVNode, Fragment, createCommentVNode, withCtx, createVNode, mergeProps, toDisplayString, ref, createApp, h } from "vue";
|
|
import { offset, autoPlacement, shift, flip, arrow, size, computePosition, getScrollParents } from "@floating-ui/dom";
|
|
function assign(to, from) {
|
|
for (const key in from) {
|
|
if (Object.prototype.hasOwnProperty.call(from, key)) {
|
|
if (typeof from[key] === "object" && to[key]) {
|
|
assign(to[key], from[key]);
|
|
} else {
|
|
to[key] = from[key];
|
|
}
|
|
}
|
|
}
|
|
}
|
|
const config = {
|
|
disabled: false,
|
|
distance: 5,
|
|
skidding: 0,
|
|
container: "body",
|
|
boundary: void 0,
|
|
instantMove: false,
|
|
disposeTimeout: 5e3,
|
|
popperTriggers: [],
|
|
strategy: "absolute",
|
|
preventOverflow: true,
|
|
flip: true,
|
|
shift: true,
|
|
overflowPadding: 0,
|
|
arrowPadding: 0,
|
|
arrowOverflow: true,
|
|
themes: {
|
|
tooltip: {
|
|
placement: "top",
|
|
triggers: ["hover", "focus", "touch"],
|
|
hideTriggers: (events) => [...events, "click"],
|
|
delay: {
|
|
show: 200,
|
|
hide: 0
|
|
},
|
|
handleResize: false,
|
|
html: false,
|
|
loadingContent: "..."
|
|
},
|
|
dropdown: {
|
|
placement: "bottom",
|
|
triggers: ["click"],
|
|
delay: 0,
|
|
handleResize: true,
|
|
autoHide: true
|
|
},
|
|
menu: {
|
|
$extend: "dropdown",
|
|
triggers: ["hover", "focus"],
|
|
popperTriggers: ["hover", "focus"],
|
|
delay: {
|
|
show: 0,
|
|
hide: 400
|
|
}
|
|
}
|
|
}
|
|
};
|
|
function getDefaultConfig(theme, key) {
|
|
let themeConfig = config.themes[theme] || {};
|
|
let value;
|
|
do {
|
|
value = themeConfig[key];
|
|
if (typeof value === "undefined") {
|
|
if (themeConfig.$extend) {
|
|
themeConfig = config.themes[themeConfig.$extend] || {};
|
|
} else {
|
|
themeConfig = null;
|
|
value = config[key];
|
|
}
|
|
} else {
|
|
themeConfig = null;
|
|
}
|
|
} while (themeConfig);
|
|
return value;
|
|
}
|
|
function getThemeClasses(theme) {
|
|
const result = [theme];
|
|
let themeConfig = config.themes[theme] || {};
|
|
do {
|
|
if (themeConfig.$extend && !themeConfig.$resetCss) {
|
|
result.push(themeConfig.$extend);
|
|
themeConfig = config.themes[themeConfig.$extend] || {};
|
|
} else {
|
|
themeConfig = null;
|
|
}
|
|
} while (themeConfig);
|
|
return result.map((c) => `v-popper--theme-${c}`);
|
|
}
|
|
function getAllParentThemes(theme) {
|
|
const result = [theme];
|
|
let themeConfig = config.themes[theme] || {};
|
|
do {
|
|
if (themeConfig.$extend) {
|
|
result.push(themeConfig.$extend);
|
|
themeConfig = config.themes[themeConfig.$extend] || {};
|
|
} else {
|
|
themeConfig = null;
|
|
}
|
|
} while (themeConfig);
|
|
return result;
|
|
}
|
|
var vueResize = "";
|
|
let supportsPassive = false;
|
|
if (typeof window !== "undefined") {
|
|
supportsPassive = false;
|
|
try {
|
|
const opts = Object.defineProperty({}, "passive", {
|
|
get() {
|
|
supportsPassive = true;
|
|
}
|
|
});
|
|
window.addEventListener("test", null, opts);
|
|
} catch (e) {
|
|
}
|
|
}
|
|
let isIOS = false;
|
|
if (typeof window !== "undefined" && typeof navigator !== "undefined") {
|
|
isIOS = /iPad|iPhone|iPod/.test(navigator.userAgent) && !window.MSStream;
|
|
}
|
|
const placements = ["auto", "top", "bottom", "left", "right"].reduce((acc, base) => acc.concat([
|
|
base,
|
|
`${base}-start`,
|
|
`${base}-end`
|
|
]), []);
|
|
const SHOW_EVENT_MAP = {
|
|
hover: "mouseenter",
|
|
focus: "focus",
|
|
click: "click",
|
|
touch: "touchstart"
|
|
};
|
|
const HIDE_EVENT_MAP = {
|
|
hover: "mouseleave",
|
|
focus: "blur",
|
|
click: "click",
|
|
touch: "touchend"
|
|
};
|
|
function removeFromArray(array, item) {
|
|
const index = array.indexOf(item);
|
|
if (index !== -1) {
|
|
array.splice(index, 1);
|
|
}
|
|
}
|
|
function nextFrame() {
|
|
return new Promise((resolve) => requestAnimationFrame(() => {
|
|
requestAnimationFrame(resolve);
|
|
}));
|
|
}
|
|
const shownPoppers = [];
|
|
let hidingPopper = null;
|
|
const shownPoppersByTheme = {};
|
|
function getShownPoppersByTheme(theme) {
|
|
let list = shownPoppersByTheme[theme];
|
|
if (!list) {
|
|
list = shownPoppersByTheme[theme] = [];
|
|
}
|
|
return list;
|
|
}
|
|
let Element = function() {
|
|
};
|
|
if (typeof window !== "undefined") {
|
|
Element = window.Element;
|
|
}
|
|
function defaultPropFactory(prop) {
|
|
return function(props) {
|
|
return getDefaultConfig(props.theme, prop);
|
|
};
|
|
}
|
|
const PROVIDE_KEY = "__floating-vue__popper";
|
|
var PrivatePopper = () => defineComponent({
|
|
name: "VPopper",
|
|
provide() {
|
|
return {
|
|
[PROVIDE_KEY]: {
|
|
parentPopper: this
|
|
}
|
|
};
|
|
},
|
|
inject: {
|
|
[PROVIDE_KEY]: { default: null }
|
|
},
|
|
props: {
|
|
theme: {
|
|
type: String,
|
|
required: true
|
|
},
|
|
targetNodes: {
|
|
type: Function,
|
|
required: true
|
|
},
|
|
referenceNode: {
|
|
type: Function,
|
|
default: null
|
|
},
|
|
popperNode: {
|
|
type: Function,
|
|
required: true
|
|
},
|
|
shown: {
|
|
type: Boolean,
|
|
default: false
|
|
},
|
|
showGroup: {
|
|
type: String,
|
|
default: null
|
|
},
|
|
ariaId: {
|
|
default: null
|
|
},
|
|
disabled: {
|
|
type: Boolean,
|
|
default: defaultPropFactory("disabled")
|
|
},
|
|
positioningDisabled: {
|
|
type: Boolean,
|
|
default: defaultPropFactory("positioningDisabled")
|
|
},
|
|
placement: {
|
|
type: String,
|
|
default: defaultPropFactory("placement"),
|
|
validator: (value) => placements.includes(value)
|
|
},
|
|
delay: {
|
|
type: [String, Number, Object],
|
|
default: defaultPropFactory("delay")
|
|
},
|
|
distance: {
|
|
type: [Number, String],
|
|
default: defaultPropFactory("distance")
|
|
},
|
|
skidding: {
|
|
type: [Number, String],
|
|
default: defaultPropFactory("skidding")
|
|
},
|
|
triggers: {
|
|
type: Array,
|
|
default: defaultPropFactory("triggers")
|
|
},
|
|
showTriggers: {
|
|
type: [Array, Function],
|
|
default: defaultPropFactory("showTriggers")
|
|
},
|
|
hideTriggers: {
|
|
type: [Array, Function],
|
|
default: defaultPropFactory("hideTriggers")
|
|
},
|
|
popperTriggers: {
|
|
type: Array,
|
|
default: defaultPropFactory("popperTriggers")
|
|
},
|
|
popperShowTriggers: {
|
|
type: [Array, Function],
|
|
default: defaultPropFactory("popperShowTriggers")
|
|
},
|
|
popperHideTriggers: {
|
|
type: [Array, Function],
|
|
default: defaultPropFactory("popperHideTriggers")
|
|
},
|
|
container: {
|
|
type: [String, Object, Element, Boolean],
|
|
default: defaultPropFactory("container")
|
|
},
|
|
boundary: {
|
|
type: [String, Element],
|
|
default: defaultPropFactory("boundary")
|
|
},
|
|
strategy: {
|
|
type: String,
|
|
validator: (value) => ["absolute", "fixed"].includes(value),
|
|
default: defaultPropFactory("strategy")
|
|
},
|
|
autoHide: {
|
|
type: [Boolean, Function],
|
|
default: defaultPropFactory("autoHide")
|
|
},
|
|
handleResize: {
|
|
type: Boolean,
|
|
default: defaultPropFactory("handleResize")
|
|
},
|
|
instantMove: {
|
|
type: Boolean,
|
|
default: defaultPropFactory("instantMove")
|
|
},
|
|
eagerMount: {
|
|
type: Boolean,
|
|
default: defaultPropFactory("eagerMount")
|
|
},
|
|
popperClass: {
|
|
type: [String, Array, Object],
|
|
default: defaultPropFactory("popperClass")
|
|
},
|
|
computeTransformOrigin: {
|
|
type: Boolean,
|
|
default: defaultPropFactory("computeTransformOrigin")
|
|
},
|
|
autoMinSize: {
|
|
type: Boolean,
|
|
default: defaultPropFactory("autoMinSize")
|
|
},
|
|
autoSize: {
|
|
type: [Boolean, String],
|
|
default: defaultPropFactory("autoSize")
|
|
},
|
|
autoMaxSize: {
|
|
type: Boolean,
|
|
default: defaultPropFactory("autoMaxSize")
|
|
},
|
|
autoBoundaryMaxSize: {
|
|
type: Boolean,
|
|
default: defaultPropFactory("autoBoundaryMaxSize")
|
|
},
|
|
preventOverflow: {
|
|
type: Boolean,
|
|
default: defaultPropFactory("preventOverflow")
|
|
},
|
|
overflowPadding: {
|
|
type: [Number, String],
|
|
default: defaultPropFactory("overflowPadding")
|
|
},
|
|
arrowPadding: {
|
|
type: [Number, String],
|
|
default: defaultPropFactory("arrowPadding")
|
|
},
|
|
arrowOverflow: {
|
|
type: Boolean,
|
|
default: defaultPropFactory("arrowOverflow")
|
|
},
|
|
flip: {
|
|
type: Boolean,
|
|
default: defaultPropFactory("flip")
|
|
},
|
|
shift: {
|
|
type: Boolean,
|
|
default: defaultPropFactory("shift")
|
|
},
|
|
shiftCrossAxis: {
|
|
type: Boolean,
|
|
default: defaultPropFactory("shiftCrossAxis")
|
|
},
|
|
noAutoFocus: {
|
|
type: Boolean,
|
|
default: defaultPropFactory("noAutoFocus")
|
|
}
|
|
},
|
|
emits: [
|
|
"show",
|
|
"hide",
|
|
"update:shown",
|
|
"apply-show",
|
|
"apply-hide",
|
|
"close-group",
|
|
"close-directive",
|
|
"auto-hide",
|
|
"resize",
|
|
"dispose"
|
|
],
|
|
data() {
|
|
return {
|
|
isShown: false,
|
|
isMounted: false,
|
|
skipTransition: false,
|
|
classes: {
|
|
showFrom: false,
|
|
showTo: false,
|
|
hideFrom: false,
|
|
hideTo: true
|
|
},
|
|
result: {
|
|
x: 0,
|
|
y: 0,
|
|
placement: "",
|
|
strategy: this.strategy,
|
|
arrow: {
|
|
x: 0,
|
|
y: 0,
|
|
centerOffset: 0
|
|
},
|
|
transformOrigin: null
|
|
},
|
|
shownChildren: new Set(),
|
|
lastAutoHide: true
|
|
};
|
|
},
|
|
computed: {
|
|
popperId() {
|
|
return this.ariaId != null ? this.ariaId : this.randomId;
|
|
},
|
|
shouldMountContent() {
|
|
return this.eagerMount || this.isMounted;
|
|
},
|
|
slotData() {
|
|
return {
|
|
popperId: this.popperId,
|
|
isShown: this.isShown,
|
|
shouldMountContent: this.shouldMountContent,
|
|
skipTransition: this.skipTransition,
|
|
autoHide: typeof this.autoHide === "function" ? this.lastAutoHide : this.autoHide,
|
|
show: this.show,
|
|
hide: this.hide,
|
|
handleResize: this.handleResize,
|
|
onResize: this.onResize,
|
|
classes: __spreadProps(__spreadValues({}, this.classes), {
|
|
popperClass: this.popperClass
|
|
}),
|
|
result: this.positioningDisabled ? null : this.result,
|
|
attrs: this.$attrs
|
|
};
|
|
},
|
|
parentPopper() {
|
|
var _a;
|
|
return (_a = this[PROVIDE_KEY]) == null ? void 0 : _a.parentPopper;
|
|
},
|
|
hasPopperShowTriggerHover() {
|
|
var _a, _b;
|
|
return ((_a = this.popperTriggers) == null ? void 0 : _a.includes("hover")) || ((_b = this.popperShowTriggers) == null ? void 0 : _b.includes("hover"));
|
|
}
|
|
},
|
|
watch: __spreadValues(__spreadValues({
|
|
shown: "$_autoShowHide",
|
|
disabled(value) {
|
|
if (value) {
|
|
this.dispose();
|
|
} else {
|
|
this.init();
|
|
}
|
|
},
|
|
async container() {
|
|
if (this.isShown) {
|
|
this.$_ensureTeleport();
|
|
await this.$_computePosition();
|
|
}
|
|
}
|
|
}, [
|
|
"triggers",
|
|
"positioningDisabled"
|
|
].reduce((acc, prop) => {
|
|
acc[prop] = "$_refreshListeners";
|
|
return acc;
|
|
}, {})), [
|
|
"placement",
|
|
"distance",
|
|
"skidding",
|
|
"boundary",
|
|
"strategy",
|
|
"overflowPadding",
|
|
"arrowPadding",
|
|
"preventOverflow",
|
|
"shift",
|
|
"shiftCrossAxis",
|
|
"flip"
|
|
].reduce((acc, prop) => {
|
|
acc[prop] = "$_computePosition";
|
|
return acc;
|
|
}, {})),
|
|
created() {
|
|
this.$_isDisposed = true;
|
|
this.randomId = `popper_${[Math.random(), Date.now()].map((n) => n.toString(36).substring(2, 10)).join("_")}`;
|
|
if (this.autoMinSize) {
|
|
console.warn('[floating-vue] `autoMinSize` option is deprecated. Use `autoSize="min"` instead.');
|
|
}
|
|
if (this.autoMaxSize) {
|
|
console.warn("[floating-vue] `autoMaxSize` option is deprecated. Use `autoBoundaryMaxSize` instead.");
|
|
}
|
|
},
|
|
mounted() {
|
|
this.init();
|
|
this.$_detachPopperNode();
|
|
},
|
|
activated() {
|
|
this.$_autoShowHide();
|
|
},
|
|
deactivated() {
|
|
this.hide();
|
|
},
|
|
beforeUnmount() {
|
|
this.dispose();
|
|
},
|
|
methods: {
|
|
show({ event = null, skipDelay = false, force = false } = {}) {
|
|
var _a, _b;
|
|
if (((_a = this.parentPopper) == null ? void 0 : _a.lockedChild) && this.parentPopper.lockedChild !== this)
|
|
return;
|
|
this.$_pendingHide = false;
|
|
if (force || !this.disabled) {
|
|
if (((_b = this.parentPopper) == null ? void 0 : _b.lockedChild) === this) {
|
|
this.parentPopper.lockedChild = null;
|
|
}
|
|
this.$_scheduleShow(event, skipDelay);
|
|
this.$emit("show");
|
|
this.$_showFrameLocked = true;
|
|
requestAnimationFrame(() => {
|
|
this.$_showFrameLocked = false;
|
|
});
|
|
}
|
|
this.$emit("update:shown", true);
|
|
},
|
|
hide({ event = null, skipDelay = false } = {}) {
|
|
var _a;
|
|
if (this.$_hideInProgress)
|
|
return;
|
|
if (this.shownChildren.size > 0) {
|
|
this.$_pendingHide = true;
|
|
return;
|
|
}
|
|
if (this.hasPopperShowTriggerHover && this.$_isAimingPopper()) {
|
|
if (this.parentPopper) {
|
|
this.parentPopper.lockedChild = this;
|
|
clearTimeout(this.parentPopper.lockedChildTimer);
|
|
this.parentPopper.lockedChildTimer = setTimeout(() => {
|
|
if (this.parentPopper.lockedChild === this) {
|
|
this.parentPopper.lockedChild.hide({ skipDelay });
|
|
this.parentPopper.lockedChild = null;
|
|
}
|
|
}, 1e3);
|
|
}
|
|
return;
|
|
}
|
|
if (((_a = this.parentPopper) == null ? void 0 : _a.lockedChild) === this) {
|
|
this.parentPopper.lockedChild = null;
|
|
}
|
|
this.$_pendingHide = false;
|
|
this.$_scheduleHide(event, skipDelay);
|
|
this.$emit("hide");
|
|
this.$emit("update:shown", false);
|
|
},
|
|
init() {
|
|
var _a, _b;
|
|
if (!this.$_isDisposed)
|
|
return;
|
|
this.$_isDisposed = false;
|
|
this.isMounted = false;
|
|
this.$_events = [];
|
|
this.$_preventShow = false;
|
|
this.$_referenceNode = (_b = (_a = this.referenceNode) == null ? void 0 : _a.call(this)) != null ? _b : this.$el;
|
|
this.$_targetNodes = this.targetNodes().filter((e) => e.nodeType === e.ELEMENT_NODE);
|
|
this.$_popperNode = this.popperNode();
|
|
this.$_innerNode = this.$_popperNode.querySelector(".v-popper__inner");
|
|
this.$_arrowNode = this.$_popperNode.querySelector(".v-popper__arrow-container");
|
|
this.$_swapTargetAttrs("title", "data-original-title");
|
|
this.$_detachPopperNode();
|
|
if (this.triggers.length) {
|
|
this.$_addEventListeners();
|
|
}
|
|
if (this.shown) {
|
|
this.show();
|
|
}
|
|
},
|
|
dispose() {
|
|
if (this.$_isDisposed)
|
|
return;
|
|
this.$_isDisposed = true;
|
|
this.$_removeEventListeners();
|
|
this.hide({ skipDelay: true });
|
|
this.$_detachPopperNode();
|
|
this.isMounted = false;
|
|
this.isShown = false;
|
|
this.$_updateParentShownChildren(false);
|
|
this.$_swapTargetAttrs("data-original-title", "title");
|
|
this.$emit("dispose");
|
|
},
|
|
async onResize() {
|
|
if (this.isShown) {
|
|
await this.$_computePosition();
|
|
this.$emit("resize");
|
|
}
|
|
},
|
|
async $_computePosition() {
|
|
var _a;
|
|
if (this.$_isDisposed || this.positioningDisabled)
|
|
return;
|
|
const options2 = {
|
|
strategy: this.strategy,
|
|
middleware: []
|
|
};
|
|
if (this.distance || this.skidding) {
|
|
options2.middleware.push(offset({
|
|
mainAxis: this.distance,
|
|
crossAxis: this.skidding
|
|
}));
|
|
}
|
|
const isPlacementAuto = this.placement.startsWith("auto");
|
|
if (isPlacementAuto) {
|
|
options2.middleware.push(autoPlacement({
|
|
alignment: (_a = this.placement.split("-")[1]) != null ? _a : ""
|
|
}));
|
|
} else {
|
|
options2.placement = this.placement;
|
|
}
|
|
if (this.preventOverflow) {
|
|
if (this.shift) {
|
|
options2.middleware.push(shift({
|
|
padding: this.overflowPadding,
|
|
boundary: this.boundary,
|
|
crossAxis: this.shiftCrossAxis
|
|
}));
|
|
}
|
|
if (!isPlacementAuto && this.flip) {
|
|
options2.middleware.push(flip({
|
|
padding: this.overflowPadding,
|
|
boundary: this.boundary
|
|
}));
|
|
}
|
|
}
|
|
options2.middleware.push(arrow({
|
|
element: this.$_arrowNode,
|
|
padding: this.arrowPadding
|
|
}));
|
|
if (this.arrowOverflow) {
|
|
options2.middleware.push({
|
|
name: "arrowOverflow",
|
|
fn: ({ placement, rects, middlewareData }) => {
|
|
let overflow;
|
|
const { centerOffset } = middlewareData.arrow;
|
|
if (placement.startsWith("top") || placement.startsWith("bottom")) {
|
|
overflow = Math.abs(centerOffset) > rects.reference.width / 2;
|
|
} else {
|
|
overflow = Math.abs(centerOffset) > rects.reference.height / 2;
|
|
}
|
|
return {
|
|
data: {
|
|
overflow
|
|
}
|
|
};
|
|
}
|
|
});
|
|
}
|
|
if (this.autoMinSize || this.autoSize) {
|
|
const autoSize = this.autoSize ? this.autoSize : this.autoMinSize ? "min" : null;
|
|
options2.middleware.push({
|
|
name: "autoSize",
|
|
fn: ({ rects, placement, middlewareData }) => {
|
|
var _a2;
|
|
if ((_a2 = middlewareData.autoSize) == null ? void 0 : _a2.skip) {
|
|
return {};
|
|
}
|
|
let width;
|
|
let height;
|
|
if (placement.startsWith("top") || placement.startsWith("bottom")) {
|
|
width = rects.reference.width;
|
|
} else {
|
|
height = rects.reference.height;
|
|
}
|
|
this.$_innerNode.style[autoSize === "min" ? "minWidth" : autoSize === "max" ? "maxWidth" : "width"] = width != null ? `${width}px` : null;
|
|
this.$_innerNode.style[autoSize === "min" ? "minHeight" : autoSize === "max" ? "maxHeight" : "height"] = height != null ? `${height}px` : null;
|
|
return {
|
|
data: {
|
|
skip: true
|
|
},
|
|
reset: {
|
|
rects: true
|
|
}
|
|
};
|
|
}
|
|
});
|
|
}
|
|
if (this.autoMaxSize || this.autoBoundaryMaxSize) {
|
|
this.$_innerNode.style.maxWidth = null;
|
|
this.$_innerNode.style.maxHeight = null;
|
|
options2.middleware.push(size({
|
|
boundary: this.boundary,
|
|
padding: this.overflowPadding,
|
|
apply: ({ width, height }) => {
|
|
this.$_innerNode.style.maxWidth = width != null ? `${width}px` : null;
|
|
this.$_innerNode.style.maxHeight = height != null ? `${height}px` : null;
|
|
}
|
|
}));
|
|
}
|
|
const data = await computePosition(this.$_referenceNode, this.$_popperNode, options2);
|
|
Object.assign(this.result, {
|
|
x: data.x,
|
|
y: data.y,
|
|
placement: data.placement,
|
|
strategy: data.strategy,
|
|
arrow: __spreadValues(__spreadValues({}, data.middlewareData.arrow), data.middlewareData.arrowOverflow)
|
|
});
|
|
},
|
|
$_scheduleShow(event = null, skipDelay = false) {
|
|
this.$_updateParentShownChildren(true);
|
|
this.$_hideInProgress = false;
|
|
clearTimeout(this.$_scheduleTimer);
|
|
if (hidingPopper && this.instantMove && hidingPopper.instantMove && hidingPopper !== this.parentPopper) {
|
|
hidingPopper.$_applyHide(true);
|
|
this.$_applyShow(true);
|
|
return;
|
|
}
|
|
if (skipDelay) {
|
|
this.$_applyShow();
|
|
} else {
|
|
this.$_scheduleTimer = setTimeout(this.$_applyShow.bind(this), this.$_computeDelay("show"));
|
|
}
|
|
},
|
|
$_scheduleHide(event = null, skipDelay = false) {
|
|
if (this.shownChildren.size > 0) {
|
|
this.$_pendingHide = true;
|
|
return;
|
|
}
|
|
this.$_updateParentShownChildren(false);
|
|
this.$_hideInProgress = true;
|
|
clearTimeout(this.$_scheduleTimer);
|
|
if (this.isShown) {
|
|
hidingPopper = this;
|
|
}
|
|
if (skipDelay) {
|
|
this.$_applyHide();
|
|
} else {
|
|
this.$_scheduleTimer = setTimeout(this.$_applyHide.bind(this), this.$_computeDelay("hide"));
|
|
}
|
|
},
|
|
$_computeDelay(type) {
|
|
const delay = this.delay;
|
|
return parseInt(delay && delay[type] || delay || 0);
|
|
},
|
|
async $_applyShow(skipTransition = false) {
|
|
clearTimeout(this.$_disposeTimer);
|
|
clearTimeout(this.$_scheduleTimer);
|
|
this.skipTransition = skipTransition;
|
|
if (this.isShown) {
|
|
return;
|
|
}
|
|
this.$_ensureTeleport();
|
|
await nextFrame();
|
|
await this.$_computePosition();
|
|
await this.$_applyShowEffect();
|
|
if (!this.positioningDisabled) {
|
|
this.$_registerEventListeners([
|
|
...getScrollParents(this.$_referenceNode),
|
|
...getScrollParents(this.$_popperNode)
|
|
], "scroll", () => {
|
|
this.$_computePosition();
|
|
});
|
|
}
|
|
},
|
|
async $_applyShowEffect() {
|
|
if (this.$_hideInProgress)
|
|
return;
|
|
if (this.computeTransformOrigin) {
|
|
const bounds = this.$_referenceNode.getBoundingClientRect();
|
|
const popperWrapper = this.$_popperNode.querySelector(".v-popper__wrapper");
|
|
const parentBounds = popperWrapper.parentNode.getBoundingClientRect();
|
|
const x = bounds.x + bounds.width / 2 - (parentBounds.left + popperWrapper.offsetLeft);
|
|
const y = bounds.y + bounds.height / 2 - (parentBounds.top + popperWrapper.offsetTop);
|
|
this.result.transformOrigin = `${x}px ${y}px`;
|
|
}
|
|
this.isShown = true;
|
|
this.$_applyAttrsToTarget({
|
|
"aria-describedby": this.popperId,
|
|
"data-popper-shown": ""
|
|
});
|
|
const showGroup = this.showGroup;
|
|
if (showGroup) {
|
|
let popover;
|
|
for (let i = 0; i < shownPoppers.length; i++) {
|
|
popover = shownPoppers[i];
|
|
if (popover.showGroup !== showGroup) {
|
|
popover.hide();
|
|
popover.$emit("close-group");
|
|
}
|
|
}
|
|
}
|
|
shownPoppers.push(this);
|
|
document.body.classList.add("v-popper--some-open");
|
|
for (const theme of getAllParentThemes(this.theme)) {
|
|
getShownPoppersByTheme(theme).push(this);
|
|
document.body.classList.add(`v-popper--some-open--${theme}`);
|
|
}
|
|
this.$emit("apply-show");
|
|
this.classes.showFrom = true;
|
|
this.classes.showTo = false;
|
|
this.classes.hideFrom = false;
|
|
this.classes.hideTo = false;
|
|
await nextFrame();
|
|
this.classes.showFrom = false;
|
|
this.classes.showTo = true;
|
|
if (!this.noAutoFocus)
|
|
this.$_popperNode.focus();
|
|
},
|
|
async $_applyHide(skipTransition = false) {
|
|
if (this.shownChildren.size > 0) {
|
|
this.$_pendingHide = true;
|
|
this.$_hideInProgress = false;
|
|
return;
|
|
}
|
|
clearTimeout(this.$_scheduleTimer);
|
|
if (!this.isShown) {
|
|
return;
|
|
}
|
|
this.skipTransition = skipTransition;
|
|
removeFromArray(shownPoppers, this);
|
|
if (shownPoppers.length === 0) {
|
|
document.body.classList.remove("v-popper--some-open");
|
|
}
|
|
for (const theme of getAllParentThemes(this.theme)) {
|
|
const list = getShownPoppersByTheme(theme);
|
|
removeFromArray(list, this);
|
|
if (list.length === 0) {
|
|
document.body.classList.remove(`v-popper--some-open--${theme}`);
|
|
}
|
|
}
|
|
if (hidingPopper === this) {
|
|
hidingPopper = null;
|
|
}
|
|
this.isShown = false;
|
|
this.$_applyAttrsToTarget({
|
|
"aria-describedby": void 0,
|
|
"data-popper-shown": void 0
|
|
});
|
|
clearTimeout(this.$_disposeTimer);
|
|
const disposeTime = getDefaultConfig(this.theme, "disposeTimeout");
|
|
if (disposeTime !== null) {
|
|
this.$_disposeTimer = setTimeout(() => {
|
|
if (this.$_popperNode) {
|
|
this.$_detachPopperNode();
|
|
this.isMounted = false;
|
|
}
|
|
}, disposeTime);
|
|
}
|
|
this.$_removeEventListeners("scroll");
|
|
this.$emit("apply-hide");
|
|
this.classes.showFrom = false;
|
|
this.classes.showTo = false;
|
|
this.classes.hideFrom = true;
|
|
this.classes.hideTo = false;
|
|
await nextFrame();
|
|
this.classes.hideFrom = false;
|
|
this.classes.hideTo = true;
|
|
},
|
|
$_autoShowHide() {
|
|
if (this.shown) {
|
|
this.show();
|
|
} else {
|
|
this.hide();
|
|
}
|
|
},
|
|
$_ensureTeleport() {
|
|
if (this.$_isDisposed)
|
|
return;
|
|
let container = this.container;
|
|
if (typeof container === "string") {
|
|
container = window.document.querySelector(container);
|
|
} else if (container === false) {
|
|
container = this.$_targetNodes[0].parentNode;
|
|
}
|
|
if (!container) {
|
|
throw new Error("No container for popover: " + this.container);
|
|
}
|
|
container.appendChild(this.$_popperNode);
|
|
this.isMounted = true;
|
|
},
|
|
$_addEventListeners() {
|
|
const handleShow = (event) => {
|
|
if (this.isShown && !this.$_hideInProgress) {
|
|
return;
|
|
}
|
|
event.usedByTooltip = true;
|
|
!this.$_preventShow && this.show({ event });
|
|
};
|
|
this.$_registerTriggerListeners(this.$_targetNodes, SHOW_EVENT_MAP, this.triggers, this.showTriggers, handleShow);
|
|
this.$_registerTriggerListeners([this.$_popperNode], SHOW_EVENT_MAP, this.popperTriggers, this.popperShowTriggers, handleShow);
|
|
const handleHide = (event) => {
|
|
if (event.usedByTooltip) {
|
|
return;
|
|
}
|
|
this.hide({ event });
|
|
};
|
|
this.$_registerTriggerListeners(this.$_targetNodes, HIDE_EVENT_MAP, this.triggers, this.hideTriggers, handleHide);
|
|
this.$_registerTriggerListeners([this.$_popperNode], HIDE_EVENT_MAP, this.popperTriggers, this.popperHideTriggers, handleHide);
|
|
},
|
|
$_registerEventListeners(targetNodes, eventType, handler) {
|
|
this.$_events.push({ targetNodes, eventType, handler });
|
|
targetNodes.forEach((node) => node.addEventListener(eventType, handler, supportsPassive ? {
|
|
passive: true
|
|
} : void 0));
|
|
},
|
|
$_registerTriggerListeners(targetNodes, eventMap, commonTriggers, customTrigger, handler) {
|
|
let triggers = commonTriggers;
|
|
if (customTrigger != null) {
|
|
triggers = typeof customTrigger === "function" ? customTrigger(triggers) : customTrigger;
|
|
}
|
|
triggers.forEach((trigger) => {
|
|
const eventType = eventMap[trigger];
|
|
if (eventType) {
|
|
this.$_registerEventListeners(targetNodes, eventType, handler);
|
|
}
|
|
});
|
|
},
|
|
$_removeEventListeners(filterEventType) {
|
|
const newList = [];
|
|
this.$_events.forEach((listener) => {
|
|
const { targetNodes, eventType, handler } = listener;
|
|
if (!filterEventType || filterEventType === eventType) {
|
|
targetNodes.forEach((node) => node.removeEventListener(eventType, handler));
|
|
} else {
|
|
newList.push(listener);
|
|
}
|
|
});
|
|
this.$_events = newList;
|
|
},
|
|
$_refreshListeners() {
|
|
if (!this.$_isDisposed) {
|
|
this.$_removeEventListeners();
|
|
this.$_addEventListeners();
|
|
}
|
|
},
|
|
$_handleGlobalClose(event, touch = false) {
|
|
if (this.$_showFrameLocked)
|
|
return;
|
|
this.hide({ event });
|
|
if (event.closePopover) {
|
|
this.$emit("close-directive");
|
|
} else {
|
|
this.$emit("auto-hide");
|
|
}
|
|
if (touch) {
|
|
this.$_preventShow = true;
|
|
setTimeout(() => {
|
|
this.$_preventShow = false;
|
|
}, 300);
|
|
}
|
|
},
|
|
$_detachPopperNode() {
|
|
this.$_popperNode.parentNode && this.$_popperNode.parentNode.removeChild(this.$_popperNode);
|
|
},
|
|
$_swapTargetAttrs(attrFrom, attrTo) {
|
|
for (const el of this.$_targetNodes) {
|
|
const value = el.getAttribute(attrFrom);
|
|
if (value) {
|
|
el.removeAttribute(attrFrom);
|
|
el.setAttribute(attrTo, value);
|
|
}
|
|
}
|
|
},
|
|
$_applyAttrsToTarget(attrs) {
|
|
for (const el of this.$_targetNodes) {
|
|
for (const n in attrs) {
|
|
const value = attrs[n];
|
|
if (value == null) {
|
|
el.removeAttribute(n);
|
|
} else {
|
|
el.setAttribute(n, value);
|
|
}
|
|
}
|
|
}
|
|
},
|
|
$_updateParentShownChildren(value) {
|
|
let parent = this.parentPopper;
|
|
while (parent) {
|
|
if (value) {
|
|
parent.shownChildren.add(this.randomId);
|
|
} else {
|
|
parent.shownChildren.delete(this.randomId);
|
|
if (parent.$_pendingHide) {
|
|
parent.hide();
|
|
}
|
|
}
|
|
parent = parent.parentPopper;
|
|
}
|
|
},
|
|
$_isAimingPopper() {
|
|
const referenceBounds = this.$_referenceNode.getBoundingClientRect();
|
|
if (mouseX >= referenceBounds.left && mouseX <= referenceBounds.right && mouseY >= referenceBounds.top && mouseY <= referenceBounds.bottom) {
|
|
const popperBounds = this.$_popperNode.getBoundingClientRect();
|
|
const vectorX = mouseX - mousePreviousX;
|
|
const vectorY = mouseY - mousePreviousY;
|
|
const distance = popperBounds.left + popperBounds.width / 2 - mousePreviousX + (popperBounds.top + popperBounds.height / 2) - mousePreviousY;
|
|
const newVectorLength = distance + popperBounds.width + popperBounds.height;
|
|
const edgeX = mousePreviousX + vectorX * newVectorLength;
|
|
const edgeY = mousePreviousY + vectorY * newVectorLength;
|
|
return lineIntersectsLine(mousePreviousX, mousePreviousY, edgeX, edgeY, popperBounds.left, popperBounds.top, popperBounds.left, popperBounds.bottom) || lineIntersectsLine(mousePreviousX, mousePreviousY, edgeX, edgeY, popperBounds.left, popperBounds.top, popperBounds.right, popperBounds.top) || lineIntersectsLine(mousePreviousX, mousePreviousY, edgeX, edgeY, popperBounds.right, popperBounds.top, popperBounds.right, popperBounds.bottom) || lineIntersectsLine(mousePreviousX, mousePreviousY, edgeX, edgeY, popperBounds.left, popperBounds.bottom, popperBounds.right, popperBounds.bottom);
|
|
}
|
|
return false;
|
|
}
|
|
},
|
|
render() {
|
|
return this.$slots.default(this.slotData);
|
|
}
|
|
});
|
|
if (typeof document !== "undefined" && typeof window !== "undefined") {
|
|
if (isIOS) {
|
|
document.addEventListener("touchstart", handleGlobalMousedown, supportsPassive ? {
|
|
passive: true,
|
|
capture: true
|
|
} : true);
|
|
document.addEventListener("touchend", handleGlobalTouchend, supportsPassive ? {
|
|
passive: true,
|
|
capture: true
|
|
} : true);
|
|
} else {
|
|
window.addEventListener("mousedown", handleGlobalMousedown, true);
|
|
window.addEventListener("click", handleGlobalClick, true);
|
|
}
|
|
window.addEventListener("resize", computePositionAllShownPoppers);
|
|
}
|
|
function handleGlobalMousedown(event) {
|
|
for (let i = 0; i < shownPoppers.length; i++) {
|
|
const popper = shownPoppers[i];
|
|
try {
|
|
const popperContent = popper.popperNode();
|
|
popper.$_mouseDownContains = popperContent.contains(event.target);
|
|
} catch (e) {
|
|
}
|
|
}
|
|
}
|
|
function handleGlobalClick(event) {
|
|
handleGlobalClose(event);
|
|
}
|
|
function handleGlobalTouchend(event) {
|
|
handleGlobalClose(event, true);
|
|
}
|
|
function handleGlobalClose(event, touch = false) {
|
|
const preventClose = {};
|
|
for (let i = shownPoppers.length - 1; i >= 0; i--) {
|
|
const popper = shownPoppers[i];
|
|
try {
|
|
const contains = popper.$_containsGlobalTarget = isContainingEventTarget(popper, event);
|
|
popper.$_pendingHide = false;
|
|
requestAnimationFrame(() => {
|
|
popper.$_pendingHide = false;
|
|
if (preventClose[popper.randomId])
|
|
return;
|
|
if (shouldAutoHide(popper, contains, event)) {
|
|
popper.$_handleGlobalClose(event, touch);
|
|
if (!event.closeAllPopover && event.closePopover && contains) {
|
|
let parent2 = popper.parentPopper;
|
|
while (parent2) {
|
|
preventClose[parent2.randomId] = true;
|
|
parent2 = parent2.parentPopper;
|
|
}
|
|
return;
|
|
}
|
|
let parent = popper.parentPopper;
|
|
while (parent) {
|
|
if (shouldAutoHide(parent, parent.$_containsGlobalTarget, event)) {
|
|
parent.$_handleGlobalClose(event, touch);
|
|
} else {
|
|
break;
|
|
}
|
|
parent = parent.parentPopper;
|
|
}
|
|
}
|
|
});
|
|
} catch (e) {
|
|
}
|
|
}
|
|
}
|
|
function isContainingEventTarget(popper, event) {
|
|
const popperContent = popper.popperNode();
|
|
return popper.$_mouseDownContains || popperContent.contains(event.target);
|
|
}
|
|
function shouldAutoHide(popper, contains, event) {
|
|
return event.closeAllPopover || event.closePopover && contains || getAutoHideResult(popper, event) && !contains;
|
|
}
|
|
function getAutoHideResult(popper, event) {
|
|
if (typeof popper.autoHide === "function") {
|
|
const result = popper.autoHide(event);
|
|
popper.lastAutoHide = result;
|
|
return result;
|
|
}
|
|
return popper.autoHide;
|
|
}
|
|
function computePositionAllShownPoppers(event) {
|
|
for (let i = 0; i < shownPoppers.length; i++) {
|
|
const popper = shownPoppers[i];
|
|
popper.$_computePosition(event);
|
|
}
|
|
}
|
|
function hideAllPoppers() {
|
|
for (let i = 0; i < shownPoppers.length; i++) {
|
|
const popper = shownPoppers[i];
|
|
popper.hide();
|
|
}
|
|
}
|
|
let mousePreviousX = 0;
|
|
let mousePreviousY = 0;
|
|
let mouseX = 0;
|
|
let mouseY = 0;
|
|
if (typeof window !== "undefined") {
|
|
window.addEventListener("mousemove", (event) => {
|
|
mousePreviousX = mouseX;
|
|
mousePreviousY = mouseY;
|
|
mouseX = event.clientX;
|
|
mouseY = event.clientY;
|
|
}, supportsPassive ? {
|
|
passive: true
|
|
} : void 0);
|
|
}
|
|
function lineIntersectsLine(x1, y1, x2, y2, x3, y3, x4, y4) {
|
|
const uA = ((x4 - x3) * (y1 - y3) - (y4 - y3) * (x1 - x3)) / ((y4 - y3) * (x2 - x1) - (x4 - x3) * (y2 - y1));
|
|
const uB = ((x2 - x1) * (y1 - y3) - (y2 - y1) * (x1 - x3)) / ((y4 - y3) * (x2 - x1) - (x4 - x3) * (y2 - y1));
|
|
return uA >= 0 && uA <= 1 && uB >= 0 && uB <= 1;
|
|
}
|
|
var _export_sfc = (sfc, props) => {
|
|
const target = sfc.__vccOpts || sfc;
|
|
for (const [key, val] of props) {
|
|
target[key] = val;
|
|
}
|
|
return target;
|
|
};
|
|
const _sfc_main$6 = {
|
|
extends: PrivatePopper()
|
|
};
|
|
function _sfc_render$3(_ctx, _cache, $props, $setup, $data, $options) {
|
|
return openBlock(), createElementBlock("div", {
|
|
ref: "reference",
|
|
class: normalizeClass(["v-popper", {
|
|
"v-popper--shown": _ctx.slotData.isShown
|
|
}])
|
|
}, [
|
|
renderSlot(_ctx.$slots, "default", normalizeProps(guardReactiveProps(_ctx.slotData)))
|
|
], 2);
|
|
}
|
|
var Popper$1 = /* @__PURE__ */ _export_sfc(_sfc_main$6, [["render", _sfc_render$3]]);
|
|
function getInternetExplorerVersion() {
|
|
var ua = window.navigator.userAgent;
|
|
var msie = ua.indexOf("MSIE ");
|
|
if (msie > 0) {
|
|
return parseInt(ua.substring(msie + 5, ua.indexOf(".", msie)), 10);
|
|
}
|
|
var trident = ua.indexOf("Trident/");
|
|
if (trident > 0) {
|
|
var rv = ua.indexOf("rv:");
|
|
return parseInt(ua.substring(rv + 3, ua.indexOf(".", rv)), 10);
|
|
}
|
|
var edge = ua.indexOf("Edge/");
|
|
if (edge > 0) {
|
|
return parseInt(ua.substring(edge + 5, ua.indexOf(".", edge)), 10);
|
|
}
|
|
return -1;
|
|
}
|
|
let isIE;
|
|
function initCompat() {
|
|
if (!initCompat.init) {
|
|
initCompat.init = true;
|
|
isIE = getInternetExplorerVersion() !== -1;
|
|
}
|
|
}
|
|
var script = {
|
|
name: "ResizeObserver",
|
|
props: {
|
|
emitOnMount: {
|
|
type: Boolean,
|
|
default: false
|
|
},
|
|
ignoreWidth: {
|
|
type: Boolean,
|
|
default: false
|
|
},
|
|
ignoreHeight: {
|
|
type: Boolean,
|
|
default: false
|
|
}
|
|
},
|
|
emits: [
|
|
"notify"
|
|
],
|
|
mounted() {
|
|
initCompat();
|
|
nextTick(() => {
|
|
this._w = this.$el.offsetWidth;
|
|
this._h = this.$el.offsetHeight;
|
|
if (this.emitOnMount) {
|
|
this.emitSize();
|
|
}
|
|
});
|
|
const object = document.createElement("object");
|
|
this._resizeObject = object;
|
|
object.setAttribute("aria-hidden", "true");
|
|
object.setAttribute("tabindex", -1);
|
|
object.onload = this.addResizeHandlers;
|
|
object.type = "text/html";
|
|
if (isIE) {
|
|
this.$el.appendChild(object);
|
|
}
|
|
object.data = "about:blank";
|
|
if (!isIE) {
|
|
this.$el.appendChild(object);
|
|
}
|
|
},
|
|
beforeUnmount() {
|
|
this.removeResizeHandlers();
|
|
},
|
|
methods: {
|
|
compareAndNotify() {
|
|
if (!this.ignoreWidth && this._w !== this.$el.offsetWidth || !this.ignoreHeight && this._h !== this.$el.offsetHeight) {
|
|
this._w = this.$el.offsetWidth;
|
|
this._h = this.$el.offsetHeight;
|
|
this.emitSize();
|
|
}
|
|
},
|
|
emitSize() {
|
|
this.$emit("notify", {
|
|
width: this._w,
|
|
height: this._h
|
|
});
|
|
},
|
|
addResizeHandlers() {
|
|
this._resizeObject.contentDocument.defaultView.addEventListener("resize", this.compareAndNotify);
|
|
this.compareAndNotify();
|
|
},
|
|
removeResizeHandlers() {
|
|
if (this._resizeObject && this._resizeObject.onload) {
|
|
if (!isIE && this._resizeObject.contentDocument) {
|
|
this._resizeObject.contentDocument.defaultView.removeEventListener("resize", this.compareAndNotify);
|
|
}
|
|
this.$el.removeChild(this._resizeObject);
|
|
this._resizeObject.onload = null;
|
|
this._resizeObject = null;
|
|
}
|
|
}
|
|
}
|
|
};
|
|
const _withId = /* @__PURE__ */ withScopeId("data-v-b329ee4c");
|
|
pushScopeId("data-v-b329ee4c");
|
|
const _hoisted_1$2 = {
|
|
class: "resize-observer",
|
|
tabindex: "-1"
|
|
};
|
|
popScopeId();
|
|
const render = /* @__PURE__ */ _withId((_ctx, _cache, $props, $setup, $data, $options) => {
|
|
return openBlock(), createBlock("div", _hoisted_1$2);
|
|
});
|
|
script.render = render;
|
|
script.__scopeId = "data-v-b329ee4c";
|
|
script.__file = "src/components/ResizeObserver.vue";
|
|
var PrivateThemeClass = (prop = "theme") => ({
|
|
computed: {
|
|
themeClass() {
|
|
return getThemeClasses(this[prop]);
|
|
}
|
|
}
|
|
});
|
|
var PopperContent_vue_vue_type_style_index_0_lang = "";
|
|
const _sfc_main$5 = defineComponent({
|
|
name: "VPopperContent",
|
|
components: {
|
|
ResizeObserver: script
|
|
},
|
|
mixins: [
|
|
PrivateThemeClass()
|
|
],
|
|
props: {
|
|
popperId: String,
|
|
theme: String,
|
|
shown: Boolean,
|
|
mounted: Boolean,
|
|
skipTransition: Boolean,
|
|
autoHide: Boolean,
|
|
handleResize: Boolean,
|
|
classes: Object,
|
|
result: Object
|
|
},
|
|
emits: [
|
|
"hide",
|
|
"resize"
|
|
],
|
|
methods: {
|
|
toPx(value) {
|
|
if (value != null && !isNaN(value)) {
|
|
return `${value}px`;
|
|
}
|
|
return null;
|
|
}
|
|
}
|
|
});
|
|
const _hoisted_1$1 = ["id", "aria-hidden", "tabindex", "data-popper-placement"];
|
|
const _hoisted_2$1 = {
|
|
ref: "inner",
|
|
class: "v-popper__inner"
|
|
};
|
|
const _hoisted_3 = /* @__PURE__ */ createElementVNode("div", { class: "v-popper__arrow-outer" }, null, -1);
|
|
const _hoisted_4 = /* @__PURE__ */ createElementVNode("div", { class: "v-popper__arrow-inner" }, null, -1);
|
|
const _hoisted_5 = [
|
|
_hoisted_3,
|
|
_hoisted_4
|
|
];
|
|
function _sfc_render$2(_ctx, _cache, $props, $setup, $data, $options) {
|
|
const _component_ResizeObserver = resolveComponent("ResizeObserver");
|
|
return openBlock(), createElementBlock("div", {
|
|
id: _ctx.popperId,
|
|
ref: "popover",
|
|
class: normalizeClass(["v-popper__popper", [
|
|
_ctx.themeClass,
|
|
_ctx.classes.popperClass,
|
|
{
|
|
"v-popper__popper--shown": _ctx.shown,
|
|
"v-popper__popper--hidden": !_ctx.shown,
|
|
"v-popper__popper--show-from": _ctx.classes.showFrom,
|
|
"v-popper__popper--show-to": _ctx.classes.showTo,
|
|
"v-popper__popper--hide-from": _ctx.classes.hideFrom,
|
|
"v-popper__popper--hide-to": _ctx.classes.hideTo,
|
|
"v-popper__popper--skip-transition": _ctx.skipTransition,
|
|
"v-popper__popper--arrow-overflow": _ctx.result && _ctx.result.arrow.overflow,
|
|
"v-popper__popper--no-positioning": !_ctx.result
|
|
}
|
|
]]),
|
|
style: normalizeStyle(_ctx.result ? {
|
|
position: _ctx.result.strategy,
|
|
transform: `translate3d(${Math.round(_ctx.result.x)}px,${Math.round(_ctx.result.y)}px,0)`
|
|
} : void 0),
|
|
"aria-hidden": _ctx.shown ? "false" : "true",
|
|
tabindex: _ctx.autoHide ? 0 : void 0,
|
|
"data-popper-placement": _ctx.result ? _ctx.result.placement : void 0,
|
|
onKeyup: _cache[2] || (_cache[2] = withKeys(($event) => _ctx.autoHide && _ctx.$emit("hide"), ["esc"]))
|
|
}, [
|
|
createElementVNode("div", {
|
|
class: "v-popper__backdrop",
|
|
onClick: _cache[0] || (_cache[0] = ($event) => _ctx.autoHide && _ctx.$emit("hide"))
|
|
}),
|
|
createElementVNode("div", {
|
|
class: "v-popper__wrapper",
|
|
style: normalizeStyle(_ctx.result ? {
|
|
transformOrigin: _ctx.result.transformOrigin
|
|
} : void 0)
|
|
}, [
|
|
createElementVNode("div", _hoisted_2$1, [
|
|
_ctx.mounted ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [
|
|
createElementVNode("div", null, [
|
|
renderSlot(_ctx.$slots, "default")
|
|
]),
|
|
_ctx.handleResize ? (openBlock(), createBlock(_component_ResizeObserver, {
|
|
key: 0,
|
|
onNotify: _cache[1] || (_cache[1] = ($event) => _ctx.$emit("resize", $event))
|
|
})) : createCommentVNode("", true)
|
|
], 64)) : createCommentVNode("", true)
|
|
], 512),
|
|
createElementVNode("div", {
|
|
ref: "arrow",
|
|
class: "v-popper__arrow-container",
|
|
style: normalizeStyle(_ctx.result ? {
|
|
left: _ctx.toPx(_ctx.result.arrow.x),
|
|
top: _ctx.toPx(_ctx.result.arrow.y)
|
|
} : void 0)
|
|
}, _hoisted_5, 4)
|
|
], 4)
|
|
], 46, _hoisted_1$1);
|
|
}
|
|
var PrivatePopperContent = /* @__PURE__ */ _export_sfc(_sfc_main$5, [["render", _sfc_render$2]]);
|
|
var PrivatePopperMethods = {
|
|
methods: {
|
|
show(...args) {
|
|
return this.$refs.popper.show(...args);
|
|
},
|
|
hide(...args) {
|
|
return this.$refs.popper.hide(...args);
|
|
},
|
|
dispose(...args) {
|
|
return this.$refs.popper.dispose(...args);
|
|
},
|
|
onResize(...args) {
|
|
return this.$refs.popper.onResize(...args);
|
|
}
|
|
}
|
|
};
|
|
const _sfc_main$4 = defineComponent({
|
|
name: "VPopperWrapper",
|
|
components: {
|
|
Popper: Popper$1,
|
|
PopperContent: PrivatePopperContent
|
|
},
|
|
mixins: [
|
|
PrivatePopperMethods,
|
|
PrivateThemeClass("finalTheme")
|
|
],
|
|
props: {
|
|
theme: {
|
|
type: String,
|
|
default: null
|
|
}
|
|
},
|
|
computed: {
|
|
finalTheme() {
|
|
var _a;
|
|
return (_a = this.theme) != null ? _a : this.$options.vPopperTheme;
|
|
}
|
|
},
|
|
methods: {
|
|
getTargetNodes() {
|
|
return Array.from(this.$el.children).filter((node) => node !== this.$refs.popperContent.$el);
|
|
}
|
|
}
|
|
});
|
|
function _sfc_render$1(_ctx, _cache, $props, $setup, $data, $options) {
|
|
const _component_PopperContent = resolveComponent("PopperContent");
|
|
const _component_Popper = resolveComponent("Popper");
|
|
return openBlock(), createBlock(_component_Popper, {
|
|
ref: "popper",
|
|
theme: _ctx.finalTheme,
|
|
"target-nodes": _ctx.getTargetNodes,
|
|
"popper-node": () => _ctx.$refs.popperContent.$el,
|
|
class: normalizeClass([
|
|
_ctx.themeClass
|
|
])
|
|
}, {
|
|
default: withCtx(({
|
|
popperId,
|
|
isShown,
|
|
shouldMountContent,
|
|
skipTransition,
|
|
autoHide,
|
|
show,
|
|
hide,
|
|
handleResize,
|
|
onResize,
|
|
classes,
|
|
result
|
|
}) => [
|
|
renderSlot(_ctx.$slots, "default", {
|
|
shown: isShown,
|
|
show,
|
|
hide
|
|
}),
|
|
createVNode(_component_PopperContent, {
|
|
ref: "popperContent",
|
|
"popper-id": popperId,
|
|
theme: _ctx.finalTheme,
|
|
shown: isShown,
|
|
mounted: shouldMountContent,
|
|
"skip-transition": skipTransition,
|
|
"auto-hide": autoHide,
|
|
"handle-resize": handleResize,
|
|
classes,
|
|
result,
|
|
onHide: hide,
|
|
onResize
|
|
}, {
|
|
default: withCtx(() => [
|
|
renderSlot(_ctx.$slots, "popper", {
|
|
shown: isShown,
|
|
hide
|
|
})
|
|
]),
|
|
_: 2
|
|
}, 1032, ["popper-id", "theme", "shown", "mounted", "skip-transition", "auto-hide", "handle-resize", "classes", "result", "onHide", "onResize"])
|
|
]),
|
|
_: 3
|
|
}, 8, ["theme", "target-nodes", "popper-node", "class"]);
|
|
}
|
|
var PrivatePopperWrapper = /* @__PURE__ */ _export_sfc(_sfc_main$4, [["render", _sfc_render$1]]);
|
|
var Dropdown_vue_vue_type_style_index_0_lang = "";
|
|
const _sfc_main$3 = defineComponent(__spreadProps(__spreadValues({}, PrivatePopperWrapper), {
|
|
name: "VDropdown",
|
|
vPopperTheme: "dropdown"
|
|
}));
|
|
const _sfc_main$2 = defineComponent(__spreadProps(__spreadValues({}, PrivatePopperWrapper), {
|
|
name: "VMenu",
|
|
vPopperTheme: "menu"
|
|
}));
|
|
var Tooltip_vue_vue_type_style_index_0_lang = "";
|
|
const _sfc_main$1 = defineComponent(__spreadProps(__spreadValues({}, PrivatePopperWrapper), {
|
|
name: "VTooltip",
|
|
vPopperTheme: "tooltip"
|
|
}));
|
|
const _sfc_main = defineComponent({
|
|
name: "VTooltipDirective",
|
|
components: {
|
|
Popper: PrivatePopper(),
|
|
PopperContent: PrivatePopperContent
|
|
},
|
|
mixins: [
|
|
PrivatePopperMethods
|
|
],
|
|
inheritAttrs: false,
|
|
props: {
|
|
theme: {
|
|
type: String,
|
|
default: "tooltip"
|
|
},
|
|
html: {
|
|
type: Boolean,
|
|
default: (props) => getDefaultConfig(props.theme, "html")
|
|
},
|
|
content: {
|
|
type: [String, Number, Function],
|
|
default: null
|
|
},
|
|
loadingContent: {
|
|
type: String,
|
|
default: (props) => getDefaultConfig(props.theme, "loadingContent")
|
|
}
|
|
},
|
|
data() {
|
|
return {
|
|
asyncContent: null
|
|
};
|
|
},
|
|
computed: {
|
|
isContentAsync() {
|
|
return typeof this.content === "function";
|
|
},
|
|
loading() {
|
|
return this.isContentAsync && this.asyncContent == null;
|
|
},
|
|
finalContent() {
|
|
if (this.isContentAsync) {
|
|
return this.loading ? this.loadingContent : this.asyncContent;
|
|
}
|
|
return this.content;
|
|
}
|
|
},
|
|
watch: {
|
|
content: {
|
|
handler() {
|
|
this.fetchContent(true);
|
|
},
|
|
immediate: true
|
|
},
|
|
async finalContent() {
|
|
await this.$nextTick();
|
|
this.$refs.popper.onResize();
|
|
}
|
|
},
|
|
created() {
|
|
this.$_fetchId = 0;
|
|
},
|
|
methods: {
|
|
fetchContent(force) {
|
|
if (typeof this.content === "function" && this.$_isShown && (force || !this.$_loading && this.asyncContent == null)) {
|
|
this.asyncContent = null;
|
|
this.$_loading = true;
|
|
const fetchId = ++this.$_fetchId;
|
|
const result = this.content(this);
|
|
if (result.then) {
|
|
result.then((res) => this.onResult(fetchId, res));
|
|
} else {
|
|
this.onResult(fetchId, result);
|
|
}
|
|
}
|
|
},
|
|
onResult(fetchId, result) {
|
|
if (fetchId !== this.$_fetchId)
|
|
return;
|
|
this.$_loading = false;
|
|
this.asyncContent = result;
|
|
},
|
|
onShow() {
|
|
this.$_isShown = true;
|
|
this.fetchContent();
|
|
},
|
|
onHide() {
|
|
this.$_isShown = false;
|
|
}
|
|
}
|
|
});
|
|
const _hoisted_1 = ["innerHTML"];
|
|
const _hoisted_2 = ["textContent"];
|
|
function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
|
|
const _component_PopperContent = resolveComponent("PopperContent");
|
|
const _component_Popper = resolveComponent("Popper");
|
|
return openBlock(), createBlock(_component_Popper, mergeProps({ ref: "popper" }, _ctx.$attrs, {
|
|
theme: _ctx.theme,
|
|
"popper-node": () => _ctx.$refs.popperContent.$el,
|
|
onApplyShow: _ctx.onShow,
|
|
onApplyHide: _ctx.onHide
|
|
}), {
|
|
default: withCtx(({
|
|
popperId,
|
|
isShown,
|
|
shouldMountContent,
|
|
skipTransition,
|
|
autoHide,
|
|
hide,
|
|
handleResize,
|
|
onResize,
|
|
classes,
|
|
result
|
|
}) => [
|
|
createVNode(_component_PopperContent, {
|
|
ref: "popperContent",
|
|
class: normalizeClass({
|
|
"v-popper--tooltip-loading": _ctx.loading
|
|
}),
|
|
"popper-id": popperId,
|
|
theme: _ctx.theme,
|
|
shown: isShown,
|
|
mounted: shouldMountContent,
|
|
"skip-transition": skipTransition,
|
|
"auto-hide": autoHide,
|
|
"handle-resize": handleResize,
|
|
classes,
|
|
result,
|
|
onHide: hide,
|
|
onResize
|
|
}, {
|
|
default: withCtx(() => [
|
|
_ctx.html ? (openBlock(), createElementBlock("div", {
|
|
key: 0,
|
|
innerHTML: _ctx.finalContent
|
|
}, null, 8, _hoisted_1)) : (openBlock(), createElementBlock("div", {
|
|
key: 1,
|
|
textContent: toDisplayString(_ctx.finalContent)
|
|
}, null, 8, _hoisted_2))
|
|
]),
|
|
_: 2
|
|
}, 1032, ["class", "popper-id", "theme", "shown", "mounted", "skip-transition", "auto-hide", "handle-resize", "classes", "result", "onHide", "onResize"])
|
|
]),
|
|
_: 1
|
|
}, 16, ["theme", "popper-node", "onApplyShow", "onApplyHide"]);
|
|
}
|
|
var PrivateTooltipDirective = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render]]);
|
|
const TARGET_CLASS = "v-popper--has-tooltip";
|
|
function getPlacement(options2, modifiers) {
|
|
let result = options2.placement;
|
|
if (!result && modifiers) {
|
|
for (const pos of placements) {
|
|
if (modifiers[pos]) {
|
|
result = pos;
|
|
}
|
|
}
|
|
}
|
|
if (!result) {
|
|
result = getDefaultConfig(options2.theme || "tooltip", "placement");
|
|
}
|
|
return result;
|
|
}
|
|
function getOptions(el, value, modifiers) {
|
|
let options2;
|
|
const type = typeof value;
|
|
if (type === "string") {
|
|
options2 = { content: value };
|
|
} else if (value && type === "object") {
|
|
options2 = value;
|
|
} else {
|
|
options2 = { content: false };
|
|
}
|
|
options2.placement = getPlacement(options2, modifiers);
|
|
options2.targetNodes = () => [el];
|
|
options2.referenceNode = () => el;
|
|
return options2;
|
|
}
|
|
let directiveApp;
|
|
let directives;
|
|
let uid = 0;
|
|
function ensureDirectiveApp() {
|
|
if (directiveApp)
|
|
return;
|
|
directives = ref([]);
|
|
directiveApp = createApp({
|
|
name: "VTooltipDirectiveApp",
|
|
setup() {
|
|
return {
|
|
directives
|
|
};
|
|
},
|
|
render() {
|
|
return this.directives.map((directive) => {
|
|
return h(PrivateTooltipDirective, __spreadProps(__spreadValues({}, directive.options), {
|
|
shown: directive.shown || directive.options.shown,
|
|
key: directive.id
|
|
}));
|
|
});
|
|
},
|
|
devtools: {
|
|
hide: true
|
|
}
|
|
});
|
|
const mountTarget = document.createElement("div");
|
|
document.body.appendChild(mountTarget);
|
|
directiveApp.mount(mountTarget);
|
|
}
|
|
function createTooltip(el, value, modifiers) {
|
|
ensureDirectiveApp();
|
|
const options2 = ref(getOptions(el, value, modifiers));
|
|
const shown = ref(false);
|
|
const item = {
|
|
id: uid++,
|
|
options: options2,
|
|
shown
|
|
};
|
|
directives.value.push(item);
|
|
if (el.classList) {
|
|
el.classList.add(TARGET_CLASS);
|
|
}
|
|
const result = el.$_popper = {
|
|
options: options2,
|
|
item,
|
|
show() {
|
|
shown.value = true;
|
|
},
|
|
hide() {
|
|
shown.value = false;
|
|
}
|
|
};
|
|
return result;
|
|
}
|
|
function destroyTooltip(el) {
|
|
if (el.$_popper) {
|
|
const index = directives.value.indexOf(el.$_popper.item);
|
|
if (index !== -1)
|
|
directives.value.splice(index, 1);
|
|
delete el.$_popper;
|
|
delete el.$_popperOldShown;
|
|
delete el.$_popperMountTarget;
|
|
}
|
|
if (el.classList) {
|
|
el.classList.remove(TARGET_CLASS);
|
|
}
|
|
}
|
|
function bind(el, { value, modifiers }) {
|
|
const options2 = getOptions(el, value, modifiers);
|
|
if (!options2.content || getDefaultConfig(options2.theme || "tooltip", "disabled")) {
|
|
destroyTooltip(el);
|
|
} else {
|
|
let directive;
|
|
if (el.$_popper) {
|
|
directive = el.$_popper;
|
|
directive.options.value = options2;
|
|
} else {
|
|
directive = createTooltip(el, value, modifiers);
|
|
}
|
|
if (typeof value.shown !== "undefined" && value.shown !== el.$_popperOldShown) {
|
|
el.$_popperOldShown = value.shown;
|
|
value.shown ? directive.show() : directive.hide();
|
|
}
|
|
}
|
|
}
|
|
var PrivateVTooltip = {
|
|
beforeMount: bind,
|
|
updated: bind,
|
|
beforeUnmount(el) {
|
|
destroyTooltip(el);
|
|
}
|
|
};
|
|
function addListeners(el) {
|
|
el.addEventListener("click", onClick);
|
|
el.addEventListener("touchstart", onTouchStart, supportsPassive ? {
|
|
passive: true
|
|
} : false);
|
|
}
|
|
function removeListeners(el) {
|
|
el.removeEventListener("click", onClick);
|
|
el.removeEventListener("touchstart", onTouchStart);
|
|
el.removeEventListener("touchend", onTouchEnd);
|
|
el.removeEventListener("touchcancel", onTouchCancel);
|
|
}
|
|
function onClick(event) {
|
|
const el = event.currentTarget;
|
|
event.closePopover = !el.$_vclosepopover_touch;
|
|
event.closeAllPopover = el.$_closePopoverModifiers && !!el.$_closePopoverModifiers.all;
|
|
}
|
|
function onTouchStart(event) {
|
|
if (event.changedTouches.length === 1) {
|
|
const el = event.currentTarget;
|
|
el.$_vclosepopover_touch = true;
|
|
const touch = event.changedTouches[0];
|
|
el.$_vclosepopover_touchPoint = touch;
|
|
el.addEventListener("touchend", onTouchEnd);
|
|
el.addEventListener("touchcancel", onTouchCancel);
|
|
}
|
|
}
|
|
function onTouchEnd(event) {
|
|
const el = event.currentTarget;
|
|
el.$_vclosepopover_touch = false;
|
|
if (event.changedTouches.length === 1) {
|
|
const touch = event.changedTouches[0];
|
|
const firstTouch = el.$_vclosepopover_touchPoint;
|
|
event.closePopover = Math.abs(touch.screenY - firstTouch.screenY) < 20 && Math.abs(touch.screenX - firstTouch.screenX) < 20;
|
|
event.closeAllPopover = el.$_closePopoverModifiers && !!el.$_closePopoverModifiers.all;
|
|
}
|
|
}
|
|
function onTouchCancel(event) {
|
|
const el = event.currentTarget;
|
|
el.$_vclosepopover_touch = false;
|
|
}
|
|
var PrivateVClosePopper = {
|
|
beforeMount(el, { value, modifiers }) {
|
|
el.$_closePopoverModifiers = modifiers;
|
|
if (typeof value === "undefined" || value) {
|
|
addListeners(el);
|
|
}
|
|
},
|
|
updated(el, { value, oldValue, modifiers }) {
|
|
el.$_closePopoverModifiers = modifiers;
|
|
if (value !== oldValue) {
|
|
if (typeof value === "undefined" || value) {
|
|
addListeners(el);
|
|
} else {
|
|
removeListeners(el);
|
|
}
|
|
}
|
|
},
|
|
beforeUnmount(el) {
|
|
removeListeners(el);
|
|
}
|
|
};
|
|
const options = config;
|
|
const VTooltip = PrivateVTooltip;
|
|
const VClosePopper = PrivateVClosePopper;
|
|
const Dropdown = _sfc_main$3;
|
|
const Menu = _sfc_main$2;
|
|
const Popper = PrivatePopper;
|
|
const PopperContent = PrivatePopperContent;
|
|
const PopperMethods = PrivatePopperMethods;
|
|
const PopperWrapper = PrivatePopperWrapper;
|
|
const ThemeClass = PrivateThemeClass;
|
|
const Tooltip = _sfc_main$1;
|
|
const TooltipDirective = PrivateTooltipDirective;
|
|
function install(app, options2 = {}) {
|
|
if (app.$_vTooltipInstalled)
|
|
return;
|
|
app.$_vTooltipInstalled = true;
|
|
assign(config, options2);
|
|
app.directive("tooltip", PrivateVTooltip);
|
|
app.directive("close-popper", PrivateVClosePopper);
|
|
app.component("VTooltip", _sfc_main$1);
|
|
app.component("VDropdown", _sfc_main$3);
|
|
app.component("VMenu", _sfc_main$2);
|
|
}
|
|
const plugin = {
|
|
version: "2.0.0-beta.20",
|
|
install,
|
|
options: config
|
|
};
|
|
export { Dropdown, HIDE_EVENT_MAP, Menu, Popper, PopperContent, PopperMethods, PopperWrapper, SHOW_EVENT_MAP, ThemeClass, Tooltip, TooltipDirective, VClosePopper, VTooltip, createTooltip, plugin as default, destroyTooltip, hideAllPoppers, install, options, placements };
|