@falcon-ui/falcon-ui 1.0.0

package/esm/components/radial-menu/src/radial-menu.vue.mjs

@@ -0,0 +1,916 @@
+import { Fragment, computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createVNode, defineComponent, isVNode, nextTick, normalizeClass, normalizeStyle, onBeforeUnmount, onMounted, onUnmounted, openBlock, ref, renderList, renderSlot, resolveDynamicComponent, toDisplayString, toRef, unref, useSlots, useTemplateRef, watch } from "vue";
+import { useGlobalSize } from "element-plus";
+var defaultNamespace = "fl";
+var statePrefix = "is-";
+var buildBemName = (namespace, block, blockSuffix = "", element = "", modifier = "") => {
+	let className = `${namespace}-${block}`;
+	if (blockSuffix) className += `-${blockSuffix}`;
+	if (element) className += `__${element}`;
+	if (modifier) className += `--${modifier}`;
+	return className;
+};
+const useNamespace = (block, namespace = defaultNamespace) => {
+	const b = (blockSuffix = "") => buildBemName(namespace, block, blockSuffix);
+	const e = (element) => element ? buildBemName(namespace, block, "", element) : "";
+	const m = (modifier) => modifier ? buildBemName(namespace, block, "", "", modifier) : "";
+	const be = (blockSuffix, element) => {
+		if (!blockSuffix || !element) return "";
+		return buildBemName(namespace, block, blockSuffix, element);
+	};
+	const em = (element, modifier) => {
+		if (!element || !modifier) return "";
+		return buildBemName(namespace, block, "", element, modifier);
+	};
+	const bm = (blockSuffix, modifier) => {
+		if (!blockSuffix || !modifier) return "";
+		return buildBemName(namespace, block, blockSuffix, "", modifier);
+	};
+	const bem = (blockSuffix, element, modifier) => {
+		if (!blockSuffix && !element && !modifier) return b();
+		return buildBemName(namespace, block, blockSuffix, element, modifier);
+	};
+	const is = (name, state = true) => state ? `${statePrefix}${name}` : "";
+	return {
+		namespace,
+		b,
+		e,
+		m,
+		be,
+		em,
+		bm,
+		bem,
+		is
+	};
+};
+var radialMenuSizes = [
+	"large",
+	"medium",
+	"small"
+];
+var radialMenuItemTypes = ["square", "circle"];
+const flRadialMenuProps = {
+	items: {
+		type: Array,
+		default: () => []
+	},
+	mode: {
+		type: String,
+		default: "inline"
+	},
+	trigger: {
+		type: String,
+		default: "click"
+	},
+	modelValue: {
+		type: Boolean,
+		default: void 0
+	},
+	shortcut: {
+		type: String,
+		default: ""
+	},
+	shortcutEnabled: {
+		type: Boolean,
+		default: true
+	},
+	centerIcon: {
+		type: [Object, String],
+		default: void 0
+	},
+	centerLabel: {
+		type: String,
+		default: ""
+	},
+	disabled: {
+		type: Boolean,
+		default: false
+	},
+	maxRingItems: {
+		type: Number,
+		default: 6
+	},
+	closeOnSelect: {
+		type: Boolean,
+		default: true
+	},
+	moreText: {
+		type: String,
+		default: "More"
+	},
+	moreMode: {
+		type: String,
+		default: "text-ellipsis"
+	},
+	moreDropdownPlacement: {
+		type: String,
+		default: "bottom"
+	},
+	size: {
+		type: String,
+		default: void 0,
+		validator: (value) => radialMenuSizes.includes(value)
+	},
+	itemType: {
+		type: String,
+		default: "square",
+		validator: (value) => radialMenuItemTypes.includes(value)
+	},
+	teleport: {
+		type: [Boolean, String],
+		default: true
+	},
+	zIndex: {
+		type: Number,
+		default: 2e3
+	}
+};
+const flRadialMenuEmits = {
+	"update:modelValue": (opened) => typeof opened === "boolean",
+	open: (reason) => typeof reason === "string",
+	close: (reason) => typeof reason === "string",
+	select: (index, indexPath, item, context) => typeof index === "string" && Array.isArray(indexPath) && indexPath.every((path) => typeof path === "string") && item !== void 0 && context !== void 0,
+	"active-change": (item) => item === null || item !== void 0,
+	"more-open": () => true,
+	"more-close": () => true
+};
+const clampRingItemCount = (maxRingItems) => {
+	if (!Number.isFinite(maxRingItems)) return 6;
+	return Math.min(Math.max(Math.trunc(maxRingItems), 1), 6);
+};
+const resolveRadialMenuItemIndex = (item) => {
+	const rawIndex = item.index ?? item.key;
+	if (rawIndex === void 0 || rawIndex === null || rawIndex === "") return "";
+	return String(rawIndex);
+};
+const normalizeRadialMenuItems = (items, options = {}) => {
+	const seenIndexes = /* @__PURE__ */ new Set();
+	const normalizedItems = [];
+	for (const item of items) {
+		const index = resolveRadialMenuItemIndex(item);
+		if (!index) {
+			options.warn?.("Missing required prop: \"index\"");
+			continue;
+		}
+		if (seenIndexes.has(index)) {
+			options.warn?.(`Duplicate item index detected: ${index}`);
+			continue;
+		}
+		seenIndexes.add(index);
+		normalizedItems.push({
+			...item,
+			index
+		});
+	}
+	return normalizedItems;
+};
+const splitRadialMenuItems = (items, maxRingItems) => {
+	const ringLimit = clampRingItemCount(maxRingItems);
+	const visibleItems = items.filter((item) => !item.hidden);
+	return {
+		visibleItems,
+		ringItems: visibleItems.slice(0, ringLimit),
+		moreItems: visibleItems.slice(ringLimit),
+		ringLimit
+	};
+};
+var findNextEnabledIndex = (items, currentIndex, direction) => {
+	if (items.length === 0) return -1;
+	for (let step = 1; step <= items.length; step += 1) {
+		const nextIndex = (currentIndex + step * direction + items.length) % items.length;
+		if (!items[nextIndex]?.disabled) return nextIndex;
+	}
+	return -1;
+};
+const useRadialMenuKeyboard = ({ ringItems, moreItems, ringRefs, moreRefs, closeMenu, closeMore, activateFocused }) => {
+	const focusRingItem = (index) => {
+		ringRefs.value[index]?.focus();
+	};
+	const focusFirstAvailableRingItem = () => {
+		const index = findNextEnabledIndex(ringItems.value, -1, 1);
+		if (index >= 0) focusRingItem(index);
+	};
+	const handleRingKeydown = (event, index) => {
+		if (event.key === "ArrowRight" || event.key === "ArrowDown") {
+			event.preventDefault();
+			const nextIndex = findNextEnabledIndex(ringItems.value, index, 1);
+			if (nextIndex >= 0) focusRingItem(nextIndex);
+			return;
+		}
+		if (event.key === "ArrowLeft" || event.key === "ArrowUp") {
+			event.preventDefault();
+			const nextIndex = findNextEnabledIndex(ringItems.value, index, -1);
+			if (nextIndex >= 0) focusRingItem(nextIndex);
+			return;
+		}
+		if (event.key === "Enter" || event.key === " ") {
+			event.preventDefault();
+			activateFocused(event);
+		}
+	};
+	const handleMoreKeydown = (event, index) => {
+		if (event.key === "ArrowDown") {
+			event.preventDefault();
+			const nextIndex = findNextEnabledIndex(moreItems.value, index, 1);
+			moreRefs.value[nextIndex]?.focus();
+			return;
+		}
+		if (event.key === "ArrowUp") {
+			event.preventDefault();
+			const nextIndex = findNextEnabledIndex(moreItems.value, index, -1);
+			moreRefs.value[nextIndex]?.focus();
+			return;
+		}
+		if (event.key === "Enter" || event.key === " ") {
+			event.preventDefault();
+			activateFocused(event);
+		}
+	};
+	const handleMenuKeydown = (event) => {
+		if (event.key === "Escape") {
+			event.preventDefault();
+			closeMore();
+			closeMenu();
+		}
+	};
+	return {
+		focusFirstAvailableRingItem,
+		handleMenuKeydown,
+		handleRingKeydown,
+		handleMoreKeydown
+	};
+};
+var toRadians = (degree) => degree * Math.PI / 180;
+var normalizeCircleCoordinate = (value) => Math.abs(value) < .001 ? 0 : value;
+const normalizeRadialMenuAngle = (angle) => {
+	const normalized = angle % 360;
+	return normalized < 0 ? normalized + 360 : normalized;
+};
+var pointOnCircle = (radius, angle) => {
+	const radians = toRadians(angle);
+	return {
+		x: normalizeCircleCoordinate(Math.cos(radians) * radius),
+		y: normalizeCircleCoordinate(Math.sin(radians) * radius)
+	};
+};
+const getRadialMenuClockwiseArcPoints = ({ radius, targetAngle, startAngle = 0, steps = 7 }) => {
+	const safeSteps = Math.max(Math.floor(steps), 2);
+	const normalizedStartAngle = normalizeRadialMenuAngle(startAngle);
+	const clockwiseSweep = normalizeRadialMenuAngle(targetAngle - normalizedStartAngle);
+	return Array.from({ length: safeSteps }, (_, index) => {
+		return pointOnCircle(radius, normalizedStartAngle + clockwiseSweep * (index / (safeSteps - 1)));
+	});
+};
+const getRadialMenuClockwiseEntryOrder = (layouts, { startAngle = 0 } = {}) => {
+	const normalizedStartAngle = normalizeRadialMenuAngle(startAngle);
+	return layouts.map((layout, index) => ({
+		index,
+		distance: normalizeRadialMenuAngle(layout.angle - normalizedStartAngle)
+	})).sort((current, next) => next.distance - current.distance || current.index - next.index).map(({ index }) => index);
+};
+var getRadialMenuActiveAngles = ({ activeIndex, count, startAngle = -90 }) => {
+	const sectorAngle = 360 / Math.max(count, 1);
+	const gap = Math.min(6, sectorAngle / 4);
+	const centerAngle = startAngle + sectorAngle * activeIndex;
+	const start = centerAngle - sectorAngle / 2 + gap;
+	const end = centerAngle + sectorAngle / 2 - gap;
+	return {
+		start,
+		end,
+		largeArcFlag: end - start > 180 ? 1 : 0
+	};
+};
+const getRadialMenuItemLayout = ({ count, index, radius, startAngle = -90 }) => {
+	const angle = startAngle + 360 / Math.max(count, 1) * index;
+	const point = pointOnCircle(radius, angle);
+	return {
+		angle,
+		x: point.x,
+		y: point.y
+	};
+};
+const getRadialMenuSectorPath = ({ activeIndex, count, innerRadius, outerRadius, startAngle = -90 }) => {
+	if (outerRadius <= innerRadius) return "";
+	const { start, end, largeArcFlag } = getRadialMenuActiveAngles({
+		activeIndex,
+		count,
+		startAngle
+	});
+	const outerStart = pointOnCircle(outerRadius, start);
+	const outerEnd = pointOnCircle(outerRadius, end);
+	const innerEnd = pointOnCircle(innerRadius, end);
+	const innerStart = pointOnCircle(innerRadius, start);
+	return [
+		`M ${outerStart.x.toFixed(3)} ${outerStart.y.toFixed(3)}`,
+		`A ${outerRadius} ${outerRadius} 0 ${largeArcFlag} 1 ${outerEnd.x.toFixed(3)} ${outerEnd.y.toFixed(3)}`,
+		`L ${innerEnd.x.toFixed(3)} ${innerEnd.y.toFixed(3)}`,
+		`A ${innerRadius} ${innerRadius} 0 ${largeArcFlag} 0 ${innerStart.x.toFixed(3)} ${innerStart.y.toFixed(3)}`,
+		"Z"
+	].join(" ");
+};
+const getRadialMenuTrackArcPath = ({ activeIndex, count, radius, innerRadius = 0, startAngle = -90 }) => {
+	if (radius <= innerRadius) return "";
+	const { start, end, largeArcFlag } = getRadialMenuActiveAngles({
+		activeIndex,
+		count,
+		startAngle
+	});
+	const arcStart = pointOnCircle(radius, start);
+	const arcEnd = pointOnCircle(radius, end);
+	return [`M ${arcStart.x.toFixed(3)} ${arcStart.y.toFixed(3)}`, `A ${radius} ${radius} 0 ${largeArcFlag} 1 ${arcEnd.x.toFixed(3)} ${arcEnd.y.toFixed(3)}`].join(" ");
+};
+const getRadialMenuTipPlacement = ({ x, y }) => {
+	if (Math.abs(x) > Math.abs(y)) return x < 0 ? "left" : "right";
+	return y < 0 ? "top" : "bottom";
+};
+var modifierKeys = new Set([
+	"alt",
+	"ctrl",
+	"control",
+	"meta",
+	"shift"
+]);
+var isEditableTarget = (target) => {
+	if (!(target instanceof HTMLElement)) return false;
+	const tagName = target.tagName.toLowerCase();
+	return tagName === "input" || tagName === "textarea" || tagName === "select" || target.isContentEditable;
+};
+var normalizeShortcut = (value) => value.split("+").map((part) => part.trim().toLowerCase()).filter(Boolean);
+var matchesShortcut = (event, shortcut) => {
+	const parts = normalizeShortcut(shortcut);
+	if (parts.length === 0) return false;
+	const key = parts.find((part) => !modifierKeys.has(part));
+	const expectsAlt = parts.includes("alt");
+	const expectsCtrl = parts.includes("ctrl") || parts.includes("control");
+	const expectsMeta = parts.includes("meta");
+	const expectsShift = parts.includes("shift");
+	return event.altKey === expectsAlt && event.ctrlKey === expectsCtrl && event.metaKey === expectsMeta && event.shiftKey === expectsShift && event.key.toLowerCase() === key;
+};
+var getViewportCenter = () => ({
+	x: typeof window === "undefined" ? 0 : window.innerWidth / 2,
+	y: typeof window === "undefined" ? 0 : window.innerHeight / 2
+});
+const useRadialMenuShortcut = ({ shortcut, enabled, open }) => {
+	const center = getViewportCenter();
+	let lastMouseX = center.x;
+	let lastMouseY = center.y;
+	const handleMouseMove = (event) => {
+		lastMouseX = event.clientX;
+		lastMouseY = event.clientY;
+	};
+	const handleKeydown = (event) => {
+		if (!enabled.value || !matchesShortcut(event, shortcut.value) || isEditableTarget(event.target)) return;
+		event.preventDefault();
+		open({
+			x: lastMouseX,
+			y: lastMouseY,
+			reason: "shortcut"
+		});
+	};
+	onMounted(() => {
+		window.addEventListener("mousemove", handleMouseMove);
+		window.addEventListener("keydown", handleKeydown);
+	});
+	onUnmounted(() => {
+		window.removeEventListener("mousemove", handleMouseMove);
+		window.removeEventListener("keydown", handleKeydown);
+	});
+};
+const useRadialMenuState = ({ modelValue, disabled, emitUpdate }) => {
+	const uncontrolledOpened = ref(false);
+	const floatingX = ref();
+	const floatingY = ref();
+	const isControlled = computed(() => modelValue.value !== void 0);
+	const opened = computed(() => isControlled.value ? modelValue.value === true : uncontrolledOpened.value);
+	const setOpened = (nextOpened) => {
+		if (disabled.value && nextOpened) return;
+		if (!isControlled.value) uncontrolledOpened.value = nextOpened;
+		emitUpdate(nextOpened);
+	};
+	const open = (options = {}) => {
+		if (options.x !== void 0) floatingX.value = options.x;
+		if (options.y !== void 0) floatingY.value = options.y;
+		setOpened(true);
+	};
+	const close = (_reason = "manual") => {
+		setOpened(false);
+	};
+	const toggle = (options = {}) => {
+		if (opened.value) close("manual");
+		else open(options);
+	};
+	return {
+		opened,
+		floatingX,
+		floatingY,
+		open,
+		close,
+		toggle
+	};
+};
+var _hoisted_1 = ["disabled", "aria-expanded"];
+var _hoisted_2 = ["r"];
+var _hoisted_3 = ["d"];
+var _hoisted_4 = ["d"];
+var _hoisted_5 = [
+	"disabled",
+	"tabindex",
+	"aria-disabled",
+	"aria-label",
+	"data-radial-menu-index",
+	"onMouseenter",
+	"onFocus",
+	"onClick",
+	"onKeydown"
+];
+var _hoisted_6 = ["aria-expanded"];
+var _hoisted_7 = [
+	"disabled",
+	"tabindex",
+	"aria-disabled",
+	"aria-label",
+	"data-radial-menu-more-index",
+	"onClick",
+	"onKeydown"
+];
+var radialMenuEntryTrackDelay = 120;
+var radialMenuEntryItemMinDuration = 440;
+var radialMenuEntryItemMaxDuration = 600;
+var radialMenuEntryItemStagger = 90;
+var radialMenuEntryArcSteps = 9;
+var radialMenuEntryStartAngle = 180;
+var radialMenuEntryEasing = "cubic-bezier(0.2, 0, 0, 1)";
+var radial_menu_default = /* @__PURE__ */ defineComponent({
+	name: "FlRadialMenu",
+	__name: "radial-menu",
+	props: flRadialMenuProps,
+	emits: flRadialMenuEmits,
+	setup(__props, { expose: __expose, emit: __emit }) {
+		const props = __props;
+		const emit = __emit;
+		const ns = useNamespace("radial-menu");
+		const slots = useSlots();
+		const rootRef = useTemplateRef("rootRef");
+		const centerRef = useTemplateRef("centerRef");
+		const activeRingIndex = ref(null);
+		const moreOpened = ref(false);
+		const isEntryAnimating = ref(false);
+		const ringButtonRefs = ref([]);
+		const moreButtonRefs = ref([]);
+		const warnedMessages = /* @__PURE__ */ new Set();
+		const globalSize = useGlobalSize();
+		const radialMenuGeometryBySize = {
+			large: {
+				radius: 96,
+				centerSize: 56
+			},
+			medium: {
+				radius: 80,
+				centerSize: 48
+			},
+			small: {
+				radius: 64,
+				centerSize: 40
+			}
+		};
+		const mapGlobalSize = (size) => {
+			if (size === "large" || size === "small") return size;
+			if (size === "default") return "medium";
+			return "large";
+		};
+		const warnRadialMenu = (message) => {
+			if (warnedMessages.has(message)) return;
+			warnedMessages.add(message);
+			console.warn(`[FlRadialMenu] ${message}`);
+		};
+		const flattenSlotVNodes = (children) => {
+			const vnodes = [];
+			for (const child of children) {
+				if (Array.isArray(child)) {
+					vnodes.push(...flattenSlotVNodes(child));
+					continue;
+				}
+				if (!isVNode(child)) continue;
+				if (child.type === Fragment && Array.isArray(child.children)) {
+					vnodes.push(...flattenSlotVNodes(child.children));
+					continue;
+				}
+				vnodes.push(child);
+			}
+			return vnodes;
+		};
+		const isRadialMenuItemVNode = (vnode) => typeof vnode.type === "object" && "name" in vnode.type && vnode.type.name === "FlRadialMenuItem";
+		const readBooleanSlotProp = (value) => value === true || value === "";
+		const readOptionalBooleanSlotProp = (value) => value === void 0 ? void 0 : readBooleanSlotProp(value);
+		const readSlotItemSlots = (children) => {
+			if (!children || Array.isArray(children) || typeof children !== "object") return;
+			return children;
+		};
+		const readSlotItemProps = (vnode) => {
+			const vnodeProps = vnode.props ?? {};
+			const vnodeSlots = readSlotItemSlots(vnode.children);
+			return {
+				index: typeof vnodeProps.index === "string" ? vnodeProps.index : void 0,
+				label: typeof vnodeProps.label === "string" ? vnodeProps.label : "",
+				icon: vnodeProps.icon,
+				shortcut: typeof vnodeProps.shortcut === "string" ? vnodeProps.shortcut : void 0,
+				disabled: readBooleanSlotProp(vnodeProps.disabled),
+				hidden: readBooleanSlotProp(vnodeProps.hidden),
+				divided: readBooleanSlotProp(vnodeProps.divided),
+				closeOnSelect: readOptionalBooleanSlotProp(vnodeProps.closeOnSelect),
+				meta: vnodeProps.meta && typeof vnodeProps.meta === "object" ? vnodeProps.meta : void 0,
+				iconSlot: vnodeSlots?.icon,
+				labelSlot: vnodeSlots?.label
+			};
+		};
+		const slotItems = computed(() => flattenSlotVNodes(slots.default?.() ?? []).filter(isRadialMenuItemVNode).map(readSlotItemProps));
+		const resolvedItems = computed(() => normalizeRadialMenuItems(slotItems.value.length > 0 ? slotItems.value : props.items, { warn: warnRadialMenu }));
+		const splitItems = computed(() => splitRadialMenuItems(resolvedItems.value, props.maxRingItems));
+		const ringItems = computed(() => splitItems.value.ringItems);
+		const moreItems = computed(() => splitItems.value.moreItems);
+		const resolvedSize = computed(() => props.size ?? mapGlobalSize(globalSize.value));
+		const sizeGeometry = computed(() => radialMenuGeometryBySize[resolvedSize.value]);
+		const resolvedRadius = computed(() => sizeGeometry.value.radius);
+		const resolvedCenterSize = computed(() => sizeGeometry.value.centerSize);
+		const activeItem = computed(() => activeRingIndex.value === null ? null : ringItems.value[activeRingIndex.value] ?? null);
+		const sectorInnerRadius = computed(() => resolvedCenterSize.value / 2 + 8);
+		const sectorPath = computed(() => {
+			if (activeRingIndex.value === null || ringItems.value.length === 0) return "";
+			return getRadialMenuSectorPath({
+				activeIndex: activeRingIndex.value,
+				count: ringItems.value.length,
+				innerRadius: sectorInnerRadius.value,
+				outerRadius: resolvedRadius.value
+			});
+		});
+		const activeTrackPath = computed(() => {
+			if (activeRingIndex.value === null || ringItems.value.length === 0) return "";
+			return getRadialMenuTrackArcPath({
+				activeIndex: activeRingIndex.value,
+				count: ringItems.value.length,
+				radius: resolvedRadius.value,
+				innerRadius: sectorInnerRadius.value
+			});
+		});
+		const { opened, floatingX, floatingY, open, close, toggle } = useRadialMenuState({
+			modelValue: toRef(props, "modelValue"),
+			disabled: toRef(props, "disabled"),
+			emitUpdate: (nextOpened) => emit("update:modelValue", nextOpened)
+		});
+		useRadialMenuShortcut({
+			shortcut: toRef(props, "shortcut"),
+			enabled: computed(() => props.shortcutEnabled && Boolean(props.shortcut)),
+			open
+		});
+		const rootClass = computed(() => [
+			ns.b(),
+			ns.m(props.mode),
+			ns.m(resolvedSize.value),
+			ns.m(`item-${props.itemType}`),
+			ns.is("opened", opened.value),
+			ns.is("entering", isEntryAnimating.value),
+			ns.is("disabled", props.disabled)
+		]);
+		const rootStyle = computed(() => ({
+			"--fl-radial-menu-floating-x": `${floatingX.value ?? (typeof window === "undefined" ? 0 : window.innerWidth / 2)}px`,
+			"--fl-radial-menu-floating-y": `${floatingY.value ?? (typeof window === "undefined" ? 0 : window.innerHeight / 2)}px`,
+			"--fl-radial-menu-z-index": String(props.zIndex),
+			"--fl-radial-menu-more-enter-delay": `${radialMenuEntryTrackDelay + Math.max(ringItems.value.length - 1, 0) * radialMenuEntryItemStagger}ms`
+		}));
+		const getItemIcon = (item) => item.iconSlot ?? item.icon;
+		const RadialMenuItemLabel = ({ item }) => item.labelSlot?.() ?? item.label;
+		const getItemLayout = (index) => getRadialMenuItemLayout({
+			count: ringItems.value.length,
+			index,
+			radius: resolvedRadius.value
+		});
+		const formatEntryCoordinate = (value) => {
+			return `${Math.abs(value) < .001 ? 0 : Number(value.toFixed(3))}px`;
+		};
+		const getEntryTransform = (x, y, scale = 1) => `translate(calc(-50% + ${formatEntryCoordinate(x)}), calc(-50% + ${formatEntryCoordinate(y)})) scale(${scale})`;
+		const prefersReducedMotion = () => typeof window !== "undefined" && typeof window.matchMedia === "function" && window.matchMedia("(prefers-reduced-motion: reduce)").matches;
+		const canUseWebAnimations = () => typeof HTMLElement !== "undefined" && typeof HTMLElement.prototype.animate === "function";
+		const canAnimateElement = (element) => typeof element.animate === "function";
+		const getItemStyle = (index) => {
+			const layout = getItemLayout(index);
+			return {
+				"--fl-radial-menu-item-x": `${layout.x}px`,
+				"--fl-radial-menu-item-y": `${layout.y}px`,
+				"--fl-radial-menu-item-index": String(index)
+			};
+		};
+		const getItemLabelClass = (index) => {
+			const placement = getRadialMenuTipPlacement(getItemLayout(index));
+			return [
+				ns.e("item-label"),
+				ns.em("item-label", `tip-${placement}`),
+				moreItems.value.length > 0 && placement === "bottom" ? ns.em("item-label", "hidden-by-more") : ""
+			];
+		};
+		const moreLabel = computed(() => {
+			if (props.moreMode === "ellipsis") return "...";
+			if (props.moreMode === "text") return props.moreText;
+			return `${props.moreText} ...`;
+		});
+		const setActiveRingIndex = (index) => {
+			activeRingIndex.value = index;
+			emit("active-change", activeItem.value);
+		};
+		const setRingButtonRef = (element, index) => {
+			if (element instanceof HTMLButtonElement) ringButtonRefs.value[index] = element;
+			else delete ringButtonRefs.value[index];
+		};
+		const setMoreButtonRef = (element, index) => {
+			if (element instanceof HTMLButtonElement) moreButtonRefs.value[index] = element;
+			else delete moreButtonRefs.value[index];
+		};
+		const setMoreOpened = (nextOpened) => {
+			moreOpened.value = nextOpened;
+			if (nextOpened) emit("more-open");
+			else emit("more-close");
+		};
+		let isDocumentPointerdownBound = false;
+		const removeDocumentPointerdown = () => {
+			if (!isDocumentPointerdownBound || typeof document === "undefined") return;
+			document.removeEventListener("pointerdown", handleDocumentPointerdown);
+			isDocumentPointerdownBound = false;
+		};
+		const addDocumentPointerdown = () => {
+			if (isDocumentPointerdownBound || typeof document === "undefined") return;
+			document.addEventListener("pointerdown", handleDocumentPointerdown);
+			isDocumentPointerdownBound = true;
+		};
+		const handleDocumentPointerdown = (event) => {
+			const { target } = event;
+			if (!(target instanceof Node)) return;
+			if (rootRef.value?.contains(target)) return;
+			moreOpened.value = false;
+			close("click-outside");
+		};
+		const activateItem = (item, source, index, event) => {
+			if (item.disabled) return;
+			emit("select", item.index, [item.index], item, {
+				source,
+				index,
+				event
+			});
+			if (item.closeOnSelect ?? props.closeOnSelect) {
+				moreOpened.value = false;
+				close("select");
+			}
+		};
+		const activateKeyboardItem = (event) => {
+			const target = event.currentTarget;
+			if (!(target instanceof HTMLElement)) return;
+			target.click();
+		};
+		const { focusFirstAvailableRingItem, handleMenuKeydown, handleRingKeydown, handleMoreKeydown } = useRadialMenuKeyboard({
+			ringItems,
+			moreItems,
+			ringRefs: ringButtonRefs,
+			moreRefs: moreButtonRefs,
+			closeMenu: () => close("escape"),
+			closeMore: () => {
+				moreOpened.value = false;
+			},
+			activateFocused: activateKeyboardItem
+		});
+		let entryAnimations = [];
+		let entryAnimationToken = 0;
+		let entryFinishTimer;
+		const clearEntryFinishTimer = () => {
+			if (entryFinishTimer === void 0) return;
+			clearTimeout(entryFinishTimer);
+			entryFinishTimer = void 0;
+		};
+		const cancelEntryAnimations = () => {
+			entryAnimationToken += 1;
+			clearEntryFinishTimer();
+			for (const animation of entryAnimations) animation.cancel();
+			entryAnimations = [];
+			isEntryAnimating.value = false;
+		};
+		const finishEntryAnimations = (token) => {
+			if (token !== entryAnimationToken) return;
+			clearEntryFinishTimer();
+			for (const animation of entryAnimations) animation.cancel();
+			entryAnimations = [];
+			isEntryAnimating.value = false;
+		};
+		const getEntryOrderByIndex = () => {
+			const entryOrder = getRadialMenuClockwiseEntryOrder(ringItems.value.map((_, index) => getItemLayout(index)), { startAngle: radialMenuEntryStartAngle });
+			return new Map(entryOrder.map((itemIndex, orderIndex) => [itemIndex, orderIndex]));
+		};
+		const getRingItemEntryDistance = (index) => normalizeRadialMenuAngle(getItemLayout(index).angle - radialMenuEntryStartAngle);
+		const getRingItemEntryDuration = (index) => {
+			const distanceRatio = Math.min(getRingItemEntryDistance(index), 360) / 360;
+			return radialMenuEntryItemMinDuration + (radialMenuEntryItemMaxDuration - radialMenuEntryItemMinDuration) * distanceRatio;
+		};
+		const getRingItemEntryKeyframes = (index) => {
+			const layout = getItemLayout(index);
+			const finalOpacity = ringItems.value[index]?.disabled ? .5 : 1;
+			const points = getRadialMenuClockwiseArcPoints({
+				radius: resolvedRadius.value,
+				startAngle: radialMenuEntryStartAngle,
+				targetAngle: layout.angle,
+				steps: radialMenuEntryArcSteps
+			});
+			return points.map((point, pointIndex) => ({
+				offset: pointIndex / (points.length - 1),
+				opacity: pointIndex === 0 ? 0 : finalOpacity,
+				transform: getEntryTransform(point.x, point.y, pointIndex === 0 ? .86 : 1)
+			}));
+		};
+		const playEntryAnimations = () => {
+			if (prefersReducedMotion() || ringItems.value.length === 0) {
+				isEntryAnimating.value = false;
+				return;
+			}
+			const ringButtons = ringButtonRefs.value.slice(0, ringItems.value.length);
+			const entryOrderByIndex = getEntryOrderByIndex();
+			const animations = [];
+			let maxEntryEndTime = 0;
+			ringButtons.forEach((button, index) => {
+				if (!button || !canAnimateElement(button)) return;
+				const delay = radialMenuEntryTrackDelay + (entryOrderByIndex.get(index) ?? index) * radialMenuEntryItemStagger;
+				const duration = getRingItemEntryDuration(index);
+				const animation = button.animate(getRingItemEntryKeyframes(index), {
+					delay,
+					duration,
+					easing: radialMenuEntryEasing,
+					fill: "both"
+				});
+				maxEntryEndTime = Math.max(maxEntryEndTime, delay + duration);
+				animations.push(animation);
+			});
+			if (animations.length === 0) {
+				isEntryAnimating.value = false;
+				return;
+			}
+			entryAnimationToken += 1;
+			const token = entryAnimationToken;
+			entryAnimations = animations;
+			isEntryAnimating.value = true;
+			entryFinishTimer = setTimeout(() => finishEntryAnimations(token), Math.ceil(maxEntryEndTime) + 40);
+		};
+		watch(opened, async (nextOpened) => {
+			cancelEntryAnimations();
+			if (!nextOpened) return;
+			isEntryAnimating.value = canUseWebAnimations() && !prefersReducedMotion() && ringItems.value.length > 0;
+			await nextTick();
+			if (!opened.value) return;
+			playEntryAnimations();
+			focusFirstAvailableRingItem();
+		});
+		watch(opened, (nextOpened) => {
+			if (nextOpened) addDocumentPointerdown();
+			else removeDocumentPointerdown();
+		}, { immediate: true });
+		onBeforeUnmount(() => {
+			removeDocumentPointerdown();
+			cancelEntryAnimations();
+		});
+		const handleCenterClick = () => {
+			if (props.disabled || props.trigger !== "click") return;
+			toggle({ reason: "click" });
+		};
+		const handleMouseEnter = () => {
+			if (props.disabled || props.trigger !== "hover") return;
+			open({ reason: "hover" });
+		};
+		const handleMouseLeave = () => {
+			if (props.trigger !== "hover") return;
+			close("hover-leave");
+		};
+		const focus = () => {
+			centerRef.value?.focus();
+		};
+		__expose({
+			open: (options) => open(options),
+			close,
+			toggle,
+			focus
+		});
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("div", {
+				ref_key: "rootRef",
+				ref: rootRef,
+				class: normalizeClass(rootClass.value),
+				style: normalizeStyle(rootStyle.value),
+				onMouseenter: handleMouseEnter,
+				onMouseleave: handleMouseLeave
+			}, [createElementVNode("button", {
+				ref_key: "centerRef",
+				ref: centerRef,
+				type: "button",
+				class: normalizeClass(unref(ns).e("center")),
+				disabled: props.disabled,
+				"aria-expanded": unref(opened),
+				"aria-haspopup": "menu",
+				onClick: handleCenterClick
+			}, [renderSlot(_ctx.$slots, "center", {}, () => [props.centerIcon && typeof props.centerIcon !== "string" ? (openBlock(), createBlock(resolveDynamicComponent(props.centerIcon), { key: 0 })) : props.centerIcon ? (openBlock(), createElementBlock("span", {
+				key: 1,
+				class: normalizeClass(unref(ns).e("center-icon"))
+			}, toDisplayString(props.centerIcon), 3)) : createCommentVNode("v-if", true), props.centerLabel ? (openBlock(), createElementBlock("span", {
+				key: 2,
+				class: normalizeClass(unref(ns).e("center-label"))
+			}, toDisplayString(props.centerLabel), 3)) : createCommentVNode("v-if", true)])], 10, _hoisted_1), unref(opened) ? (openBlock(), createElementBlock("div", {
+				key: 0,
+				class: normalizeClass(unref(ns).e("panel")),
+				role: "menu",
+				onKeydown: _cache[2] || (_cache[2] = (...args) => unref(handleMenuKeydown) && unref(handleMenuKeydown)(...args))
+			}, [
+				(openBlock(), createElementBlock("svg", {
+					class: normalizeClass(unref(ns).e("sector")),
+					viewBox: "-140 -140 280 280",
+					"aria-hidden": "true"
+				}, [
+					createElementVNode("circle", {
+						class: normalizeClass(unref(ns).e("track")),
+						cx: "0",
+						cy: "0",
+						r: resolvedRadius.value
+					}, null, 10, _hoisted_2),
+					sectorPath.value ? (openBlock(), createElementBlock("path", {
+						key: 0,
+						class: normalizeClass(unref(ns).e("sector-path")),
+						d: sectorPath.value
+					}, null, 10, _hoisted_3)) : createCommentVNode("v-if", true),
+					activeTrackPath.value ? (openBlock(), createElementBlock("path", {
+						key: 1,
+						class: normalizeClass(unref(ns).e("track-active")),
+						d: activeTrackPath.value
+					}, null, 10, _hoisted_4)) : createCommentVNode("v-if", true)
+				], 2)),
+				(openBlock(true), createElementBlock(Fragment, null, renderList(ringItems.value, (item, index) => {
+					return openBlock(), createElementBlock("button", {
+						key: item.index,
+						ref_for: true,
+						ref: (element) => setRingButtonRef(element, index),
+						type: "button",
+						role: "menuitem",
+						class: normalizeClass([
+							unref(ns).e("item"),
+							unref(ns).is("active", activeRingIndex.value === index),
+							unref(ns).is("disabled", item.disabled === true)
+						]),
+						style: normalizeStyle(getItemStyle(index)),
+						disabled: item.disabled,
+						tabindex: item.disabled ? -1 : 0,
+						"aria-disabled": item.disabled === true,
+						"aria-label": item.label,
+						"data-radial-menu-index": item.index,
+						onMouseenter: ($event) => setActiveRingIndex(index),
+						onFocus: ($event) => setActiveRingIndex(index),
+						onMouseleave: _cache[0] || (_cache[0] = ($event) => setActiveRingIndex(null)),
+						onClick: ($event) => activateItem(item, "ring", index, $event),
+						onKeydown: ($event) => unref(handleRingKeydown)($event, index)
+					}, [getItemIcon(item) && typeof getItemIcon(item) !== "string" ? (openBlock(), createBlock(resolveDynamicComponent(getItemIcon(item)), { key: 0 })) : getItemIcon(item) ? (openBlock(), createElementBlock("span", {
+						key: 1,
+						class: normalizeClass(unref(ns).e("item-icon"))
+					}, toDisplayString(getItemIcon(item)), 3)) : createCommentVNode("v-if", true), createElementVNode("span", { class: normalizeClass(getItemLabelClass(index)) }, [createVNode(RadialMenuItemLabel, { item }, null, 8, ["item"])], 2)], 46, _hoisted_5);
+				}), 128)),
+				moreItems.value.length > 0 ? (openBlock(), createElementBlock("button", {
+					key: 0,
+					type: "button",
+					class: normalizeClass(unref(ns).e("more")),
+					"aria-haspopup": "menu",
+					"aria-expanded": moreOpened.value,
+					onClick: _cache[1] || (_cache[1] = ($event) => setMoreOpened(!moreOpened.value))
+				}, toDisplayString(moreLabel.value), 11, _hoisted_6)) : createCommentVNode("v-if", true),
+				moreOpened.value ? (openBlock(), createElementBlock("div", {
+					key: 1,
+					class: normalizeClass([unref(ns).e("more-dropdown"), unref(ns).m(`more-${props.moreDropdownPlacement}`)]),
+					role: "menu"
+				}, [(openBlock(true), createElementBlock(Fragment, null, renderList(moreItems.value, (item, index) => {
+					return openBlock(), createElementBlock("button", {
+						key: item.index,
+						ref_for: true,
+						ref: (element) => setMoreButtonRef(element, index),
+						type: "button",
+						role: "menuitem",
+						class: normalizeClass([unref(ns).e("more-item"), unref(ns).is("disabled", item.disabled === true)]),
+						disabled: item.disabled,
+						tabindex: item.disabled ? -1 : 0,
+						"aria-disabled": item.disabled === true,
+						"aria-label": item.label,
+						"data-radial-menu-more-index": item.index,
+						onClick: ($event) => activateItem(item, "more", index, $event),
+						onKeydown: ($event) => unref(handleMoreKeydown)($event, index)
+					}, [createElementVNode("span", { class: normalizeClass(unref(ns).e("more-content")) }, [getItemIcon(item) && typeof getItemIcon(item) !== "string" ? (openBlock(), createBlock(resolveDynamicComponent(getItemIcon(item)), {
+						key: 0,
+						class: normalizeClass(unref(ns).e("more-icon"))
+					}, null, 8, ["class"])) : getItemIcon(item) ? (openBlock(), createElementBlock("span", {
+						key: 1,
+						class: normalizeClass(unref(ns).e("more-icon"))
+					}, toDisplayString(getItemIcon(item)), 3)) : createCommentVNode("v-if", true), createElementVNode("span", { class: normalizeClass(unref(ns).e("more-label")) }, [createVNode(RadialMenuItemLabel, { item }, null, 8, ["item"])], 2)], 2), item.shortcut ? (openBlock(), createElementBlock("span", {
+						key: 0,
+						class: normalizeClass(unref(ns).e("shortcut"))
+					}, toDisplayString(item.shortcut), 3)) : createCommentVNode("v-if", true)], 42, _hoisted_7);
+				}), 128))], 2)) : createCommentVNode("v-if", true)
+			], 34)) : createCommentVNode("v-if", true)], 38);
+		};
+	}
+});
+export { radial_menu_default as default };
+
+//# sourceMappingURL=radial-menu.vue.mjs.map