@orvui/vue 0.0.0-stage → 0.1.0

package/dist/cylinder-carousel-Dnt34HR2.js

@@ -0,0 +1,187 @@
+import { s as e } from "./composables-BJ1sih_H.js";
+import { Comment as t, Fragment as n, computed as r, createBlock as i, createElementBlock as a, createVNode as o, defineComponent as s, isVNode as c, normalizeStyle as l, onBeforeUnmount as u, onMounted as d, onUpdated as f, openBlock as p, ref as m, renderList as h, unref as g, useSlots as _, watch as v, withCtx as y, withKeys as b, withModifiers as x } from "vue";
+import { animate as S, motion as ee, useMotionValue as C, useMotionValueEvent as te } from "motion-v";
+// src/motion/cylinder-carousel/src/projection.ts
+function ne(e) {
+	let t = (e.visibleItems + 1) / 2, n = 0;
+	for (let r = 0; r < e.visibleItems; r++) {
+		let i = Math.abs(r - (e.visibleItems - 1) / 2) / t;
+		n += e.variant === "convex" ? 1 - (1 - e.minScale) * i : e.minScale + (1 - e.minScale) * i;
+	}
+	return Math.min(e.itemSize, e.width * .65 / n);
+}
+function re(e, t, n, r, i) {
+	let a = Math.max(1, n), o = e - t, s = o - Math.round(o / a) * n, c = (r.visibleItems + 1) / 2, l = Math.PI * 72 / 180, u = Math.PI * 95 / 180, d = Math.cos(l), f = Math.max(.2, (r.minScale - d) / (1 - r.minScale)), p = r.width / 2 * (d + f) / Math.sin(l), m = Math.max(-u, Math.min(u, s / c * l)), h = r.variant === "convex", g = h ? s * r.width / (r.visibleItems + 1) : p * Math.sin(m) / (Math.cos(m) + f), _ = Math.min(Math.abs(s) / c, u / l), v = h ? 1 - (1 - r.minScale) * _ : r.minScale + (1 - r.minScale) * _, y = (r.arc ?? i * .35) * (.5 - (g / (r.width / 2)) ** 2);
+	return {
+		x: g,
+		y: h ? -y : y,
+		scale: v,
+		visibility: Math.abs(g) > r.width / 2 + i ? "hidden" : "visible"
+	};
+}
+// src/motion/cylinder-carousel/src/CylinderCarousel.vue
+var w = /* @__PURE__ */ s({
+	__name: "CylinderCarousel",
+	props: {
+		itemSize: { default: 200 },
+		visibleItems: { default: 5 },
+		variant: { default: "concave" },
+		minScale: { default: .55 },
+		dragSpeed: { default: 1.5 },
+		arc: {},
+		snap: {
+			type: Boolean,
+			default: !0
+		},
+		autoRotate: {
+			type: Boolean,
+			default: !1
+		},
+		autoRotateSpeed: { default: .4 },
+		defaultIndex: { default: 0 },
+		height: {}
+	},
+	emits: ["indexChange"],
+	setup(w, { emit: ie }) {
+		let T = w, E = ie, ae = _(), D = m(null), O = m(800), k = e(), A = C(T.defaultIndex), j = m(A.get()), M = m(!1), oe = s({
+			props: ["node"],
+			setup: (e) => () => e.node
+		});
+		function N(e) {
+			let r = [];
+			for (let i of e) c(i) && i.type !== t && (i.type === n ? r.push(...N(i.children)) : r.push(i));
+			return r;
+		}
+		let P = r(() => N(ae.default?.() ?? [])), F = r(() => ({
+			width: O.value || 800,
+			itemSize: T.itemSize,
+			visibleItems: T.visibleItems,
+			minScale: T.minScale,
+			variant: T.variant,
+			arc: T.arc
+		})), I = r(() => ne(F.value)), L = r(() => F.value.width / (T.visibleItems + 1)), R = T.defaultIndex, z = !1, B = 0, V, H, U, W = 0, G;
+		te(A, "change", (e) => {
+			j.value = e;
+			let t = P.value.length;
+			if (!t) return;
+			let n = (Math.round(e) % t + t) % t;
+			n !== R && (R = n, E("indexChange", n));
+		});
+		function K() {
+			++W, U?.stop(), U = void 0;
+		}
+		function q(e, t = A.getVelocity()) {
+			K(), k.value ? A.set(e) : U = S(A, e, {
+				type: "spring",
+				stiffness: 40,
+				damping: 20,
+				mass: 3,
+				velocity: t,
+				restDelta: .001,
+				restSpeed: .005
+			});
+		}
+		function J(e) {
+			let t = j.value + Math.max(-6, Math.min(6, e * .45));
+			q(T.snap ? Math.round(t) : t, e);
+		}
+		function Y() {
+			let e = G;
+			if (G = void 0, e) try {
+				e.element.hasPointerCapture(e.id) && e.element.releasePointerCapture(e.id);
+			} catch {}
+		}
+		function se(e) {
+			if (e.button !== 0 || G) return;
+			e.preventDefault(), K();
+			let t = performance.now(), n = e.currentTarget;
+			G = {
+				id: e.pointerId,
+				element: n,
+				startX: e.clientX,
+				startPosition: A.get(),
+				x: e.clientX,
+				previousX: e.clientX,
+				time: t,
+				previousTime: t
+			};
+			try {
+				n.setPointerCapture(e.pointerId);
+			} catch {}
+		}
+		function X(e) {
+			let t = G;
+			t && (A.set(t.startPosition - (e.clientX - t.startX) * T.dragSpeed / L.value), t.previousX = t.x, t.previousTime = t.time, t.x = e.clientX, t.time = performance.now());
+		}
+		function Z(e) {
+			let t = G;
+			if (!t) return;
+			Y();
+			let n = t.time - t.previousTime;
+			J(n > 0 ? -(t.x - t.previousX) / n * T.dragSpeed * 1e3 / L.value : 0);
+		}
+		function ce(e) {
+			K();
+			let t = Math.abs(e.deltaX) > Math.abs(e.deltaY) ? e.deltaX : e.deltaY;
+			A.set(A.get() + t / L.value), clearTimeout(H), H = setTimeout(() => J(A.getVelocity()), 140);
+		}
+		function Q() {
+			if (cancelAnimationFrame(B), B = 0, !z || !T.autoRotate || k.value || !P.value.length) return;
+			let e = performance.now();
+			function t(n) {
+				let r = (n - e) / 1e3;
+				e = n, G || M.value || U || A.set(A.get() + T.autoRotateSpeed * r), B = requestAnimationFrame(t);
+			}
+			B = requestAnimationFrame(t);
+		}
+		v([
+			() => T.autoRotate,
+			() => T.autoRotateSpeed,
+			k
+		], Q);
+		let $ = 0;
+		return d(() => {
+			D.value && (O.value = D.value.clientWidth, typeof ResizeObserver < "u" && (V = new ResizeObserver((e) => {
+				O.value = e[0]?.contentRect.width ?? D.value?.clientWidth ?? 800;
+			}), V.observe(D.value))), z = !0, $ = P.value.length, Q();
+		}), f(() => {
+			P.value.length !== $ && ($ = P.value.length, Q());
+		}), u(() => {
+			z = !1, cancelAnimationFrame(B), V?.disconnect(), clearTimeout(H), K(), Y();
+		}), (e, t) => (p(), a("div", {
+			ref_key: "root",
+			ref: D,
+			role: "application",
+			"aria-roledescription": "carousel",
+			"aria-label": "Cylinder carousel",
+			tabindex: "0",
+			class: "relative w-full touch-none select-none [-webkit-touch-callout:none] cursor-grab outline-none [clip-path:inset(0)] active:cursor-grabbing focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-ring/50",
+			style: l({ height: `${w.height ?? I.value}px` }),
+			onKeydown: [t[0] ||= b(x((e) => q(Math.round(j.value) + 1), ["prevent"]), ["right"]), t[1] ||= b(x((e) => q(Math.round(j.value) - 1), ["prevent"]), ["left"])],
+			onWheel: ce,
+			onPointerdown: se,
+			onPointermove: X,
+			onPointerup: Z,
+			onPointercancel: Z,
+			onPointerenter: t[2] ||= (e) => M.value = !0,
+			onPointerleave: t[3] ||= (e) => M.value = !1
+		}, [(p(!0), a(n, null, h(P.value, (e, t) => (p(), i(g(ee).div, {
+			key: t,
+			class: "absolute left-1/2 top-1/2",
+			style: l({
+				width: `${I.value}px`,
+				height: `${I.value}px`,
+				marginLeft: `${-I.value / 2}px`,
+				marginTop: `${-I.value / 2}px`
+			}),
+			animate: g(re)(t, j.value, P.value.length, F.value, I.value),
+			transition: { duration: 0 }
+		}, {
+			default: y(() => [o(g(oe), { node: e }, null, 8, ["node"])]),
+			_: 2
+		}, 1032, ["style", "animate"]))), 128))], 36));
+	}
+});
+export { w as t };
+
+//# sourceMappingURL=cylinder-carousel-Dnt34HR2.js.map

package/dist/cylinder-carousel-Dnt34HR2.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"cylinder-carousel-Dnt34HR2.js","names":["_openBlock","_createElementBlock","_normalizeStyle","_withKeys","_withModifiers","_Fragment","_renderList","_createBlock","_unref","_withCtx","_createVNode","_sfc_main","useReducedMotion","cylinderSize","edge","layout","occupied","slot","distance","cylinderProjection","cycle","count","delta","index","position","edgeAngle","limit","cosine","camera","radius","angle","convex","x","falloff","scale","arc","size","CylinderCarousel_default","defineComponent","__emit","props","__props","emit","slots","useSlots","root","ref","width","reduced","useMotionValue","displayedPosition","hover","RenderNode","children","result","node","nodes","isVNode","Comment","Fragment","items","computed","gap","selected","mounted","frame","observer","wheelTimer","animation","animationVersion","pointer","value","stop","travel","target","animate","settle","velocity","dropCapture","current","down","event","time","element","move","active","up","elapsed","wheel","rotate","previous","tick","onMounted","entries","onUpdated","onBeforeUnmount","openBlock","createElementBlock","normalizeStyle","_cache","withKeys","withModifiers","renderList","createBlock","unref","motion","withCtx","createVNode"],"sources":["../src/motion/cylinder-carousel/src/projection.ts","../src/motion/cylinder-carousel/src/CylinderCarousel.vue","../src/motion/cylinder-carousel/src/CylinderCarousel.vue"],"sourcesContent":["export interface CylinderLayout { width: number; itemSize: number; visibleItems: number; minScale: number; variant: \"concave\" | \"convex\"; arc?: number }\nexport function cylinderSize(layout: CylinderLayout) {\n  const edge = (layout.visibleItems + 1) / 2;\n  let occupied = 0;\n  for (let slot = 0; slot < layout.visibleItems; slot++) {\n    const distance = Math.abs(slot - (layout.visibleItems - 1) / 2) / edge;\n    occupied += layout.variant === \"convex\" ? 1 - (1 - layout.minScale) * distance : layout.minScale + (1 - layout.minScale) * distance;\n  }\n  return Math.min(layout.itemSize, layout.width * .65 / occupied);\n}\nexport function cylinderProjection(index: number, position: number, count: number, layout: CylinderLayout, size: number) {\n  const cycle = Math.max(1, count);\n  const delta = index - position;\n  const distance = delta - Math.round(delta / cycle) * count;\n  const edge = (layout.visibleItems + 1) / 2;\n  const edgeAngle = Math.PI * 72 / 180;\n  const limit = Math.PI * 95 / 180;\n  const cosine = Math.cos(edgeAngle);\n  const camera = Math.max(.2, (layout.minScale - cosine) / (1 - layout.minScale));\n  const radius = layout.width / 2 * (cosine + camera) / Math.sin(edgeAngle);\n  const angle = Math.max(-limit, Math.min(limit, distance / edge * edgeAngle));\n  const convex = layout.variant === \"convex\";\n  const x = convex ? distance * layout.width / (layout.visibleItems + 1) : radius * Math.sin(angle) / (Math.cos(angle) + camera);\n  const falloff = Math.min(Math.abs(distance) / edge, limit / edgeAngle);\n  const scale = convex ? 1 - (1 - layout.minScale) * falloff : layout.minScale + (1 - layout.minScale) * falloff;\n  const arc = (layout.arc ?? size * .35) * (.5 - (x / (layout.width / 2)) ** 2);\n  return { x, y: convex ? -arc : arc, scale, visibility: Math.abs(x) > layout.width / 2 + size ? \"hidden\" as const : \"visible\" as const };\n}\n","<script setup lang=\"ts\">\nimport { Comment, Fragment, computed, defineComponent, isVNode, onBeforeUnmount, onMounted, onUpdated, ref, useSlots, watch, type VNodeChild } from \"vue\";\nimport { animate, motion, useMotionValue, useMotionValueEvent } from \"motion-v\";\nimport { useReducedMotion } from \"../../../lib/composables\";\nimport { cylinderProjection, cylinderSize } from \"./projection\";\nconst props = withDefaults(defineProps<{ itemSize?: number; visibleItems?: number; variant?: \"concave\" | \"convex\"; minScale?: number; dragSpeed?: number; arc?: number; snap?: boolean; autoRotate?: boolean; autoRotateSpeed?: number; defaultIndex?: number; height?: number }>(), { itemSize: 200, visibleItems: 5, variant: \"concave\", minScale: .55, dragSpeed: 1.5, snap: true, autoRotate: false, autoRotateSpeed: .4, defaultIndex: 0 });\nconst emit = defineEmits([\"indexChange\"]);\nconst slots = useSlots();\nconst root = ref<HTMLElement | null>(null);\nconst width = ref(800);\nconst reduced = useReducedMotion();\nconst position = useMotionValue(props.defaultIndex);\nconst displayedPosition = ref(position.get());\nconst scroll = displayedPosition;\nconst hover = ref(false);\nconst RenderNode = defineComponent({ props: [\"node\"], setup: props => () => props.node });\nfunction children(nodes: VNodeChild[]): VNodeChild[] { const result: VNodeChild[] = []; for (const node of nodes) { if (!isVNode(node) || node.type === Comment) continue; if (node.type === Fragment) result.push(...children(node.children as VNodeChild[])); else result.push(node); } return result; }\nconst items = computed(() => children(slots.default?.() ?? []));\nconst layout = computed(() => ({ width: width.value || 800, itemSize: props.itemSize, visibleItems: props.visibleItems, minScale: props.minScale, variant: props.variant, arc: props.arc }));\nconst size = computed(() => cylinderSize(layout.value));\nconst gap = computed(() => layout.value.width / (props.visibleItems + 1));\nlet selected = props.defaultIndex;\nlet mounted = false;\nlet frame = 0;\nlet observer: ResizeObserver | undefined;\nlet wheelTimer: ReturnType<typeof setTimeout> | undefined;\nlet animation: ReturnType<typeof animate> | undefined;\nlet animationVersion = 0;\nlet pointer: { id: number; element: HTMLElement; startX: number; startPosition: number; previousX: number; previousTime: number; x: number; time: number } | undefined;\nuseMotionValueEvent(position, \"change\", value => { displayedPosition.value = value; const count = items.value.length; if (!count) return; const index = (Math.round(value) % count + count) % count; if (index !== selected) { selected = index; emit(\"indexChange\", index); } });\nfunction stop() { ++animationVersion; animation?.stop(); animation = undefined; }\nfunction travel(target: number, velocity = position.getVelocity()) {\n  stop(); if (reduced.value) { position.set(target); return; }\n  animation = animate(position, target, { type: \"spring\", stiffness: 40, damping: 20, mass: 3, velocity, restDelta: .001, restSpeed: .005 });\n}\nfunction settle(velocity: number) { const target = displayedPosition.value + Math.max(-6, Math.min(6, velocity * .45)); travel(props.snap ? Math.round(target) : target, velocity); }\nfunction dropCapture() { const current = pointer; pointer = undefined; if (current) try { if (current.element.hasPointerCapture(current.id)) current.element.releasePointerCapture(current.id); } catch {} }\nfunction down(event: PointerEvent) { if (event.button !== 0 || pointer) return; event.preventDefault(); stop(); const time = performance.now(); const element = event.currentTarget as HTMLElement; pointer = { id: event.pointerId, element, startX: event.clientX, startPosition: position.get(), x: event.clientX, previousX: event.clientX, time, previousTime: time }; try { element.setPointerCapture(event.pointerId); } catch {} }\nfunction move(event: PointerEvent) { const active = pointer; if (!active) return; position.set(active.startPosition - (event.clientX - active.startX) * props.dragSpeed / gap.value); active.previousX = active.x; active.previousTime = active.time; active.x = event.clientX; active.time = performance.now(); }\nfunction up(event: PointerEvent) { const active = pointer; if (!active) return; dropCapture(); const elapsed = active.time - active.previousTime; const velocity = elapsed > 0 ? -(active.x - active.previousX) / elapsed * props.dragSpeed * 1000 / gap.value : 0; settle(velocity); }\nfunction wheel(event: WheelEvent) { stop(); const delta = Math.abs(event.deltaX) > Math.abs(event.deltaY) ? event.deltaX : event.deltaY; position.set(position.get() + delta / gap.value); clearTimeout(wheelTimer); wheelTimer = setTimeout(() => settle(position.getVelocity()), 140); }\nfunction rotate() { cancelAnimationFrame(frame); frame = 0; if (!mounted || !props.autoRotate || reduced.value || !items.value.length) return; let previous = performance.now(); function tick(time: number) { const elapsed = (time - previous) / 1000; previous = time; if (!pointer && !hover.value && !animation) position.set(position.get() + props.autoRotateSpeed * elapsed); frame = requestAnimationFrame(tick); } frame = requestAnimationFrame(tick); }\nwatch([() => props.autoRotate, () => props.autoRotateSpeed, reduced], rotate);\nlet count = 0;\nonMounted(() => { if (root.value) { width.value = root.value.clientWidth; if (typeof ResizeObserver !== \"undefined\") { observer = new ResizeObserver(entries => { width.value = entries[0]?.contentRect.width ?? root.value?.clientWidth ?? 800; }); observer.observe(root.value); } } mounted = true; count = items.value.length; rotate(); });\nonUpdated(() => { if (items.value.length !== count) { count = items.value.length; rotate(); } });\nonBeforeUnmount(() => { mounted = false; cancelAnimationFrame(frame); observer?.disconnect(); clearTimeout(wheelTimer); stop(); dropCapture(); });\n</script>\n<template>\n  <div ref=\"root\" role=\"application\" aria-roledescription=\"carousel\" aria-label=\"Cylinder carousel\" tabindex=\"0\" class=\"relative w-full touch-none select-none [-webkit-touch-callout:none] cursor-grab outline-none [clip-path:inset(0)] active:cursor-grabbing focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-ring/50\" :style=\"{ height: `${height ?? size}px` }\" @keydown.right.prevent=\"travel(Math.round(displayedPosition) + 1)\" @keydown.left.prevent=\"travel(Math.round(displayedPosition) - 1)\" @wheel=\"wheel\" @pointerdown=\"down\" @pointermove=\"move\" @pointerup=\"up\" @pointercancel=\"up\" @pointerenter=\"hover = true\" @pointerleave=\"hover = false\">\n    <motion.div v-for=\"(node, index) in items\" :key=\"index\" class=\"absolute left-1/2 top-1/2\" :style=\"{ width: `${size}px`, height: `${size}px`, marginLeft: `${-size / 2}px`, marginTop: `${-size / 2}px` }\" :animate=\"cylinderProjection(index, displayedPosition, items.length, layout, size)\" :transition=\"{ duration: 0 }\"><RenderNode :node=\"node\" /></motion.div>\n  </div>\n</template>\n","<script setup lang=\"ts\">\nimport { Comment, Fragment, computed, defineComponent, isVNode, onBeforeUnmount, onMounted, onUpdated, ref, useSlots, watch, type VNodeChild } from \"vue\";\nimport { animate, motion, useMotionValue, useMotionValueEvent } from \"motion-v\";\nimport { useReducedMotion } from \"../../../lib/composables\";\nimport { cylinderProjection, cylinderSize } from \"./projection\";\nconst props = withDefaults(defineProps<{ itemSize?: number; visibleItems?: number; variant?: \"concave\" | \"convex\"; minScale?: number; dragSpeed?: number; arc?: number; snap?: boolean; autoRotate?: boolean; autoRotateSpeed?: number; defaultIndex?: number; height?: number }>(), { itemSize: 200, visibleItems: 5, variant: \"concave\", minScale: .55, dragSpeed: 1.5, snap: true, autoRotate: false, autoRotateSpeed: .4, defaultIndex: 0 });\nconst emit = defineEmits([\"indexChange\"]);\nconst slots = useSlots();\nconst root = ref<HTMLElement | null>(null);\nconst width = ref(800);\nconst reduced = useReducedMotion();\nconst position = useMotionValue(props.defaultIndex);\nconst displayedPosition = ref(position.get());\nconst scroll = displayedPosition;\nconst hover = ref(false);\nconst RenderNode = defineComponent({ props: [\"node\"], setup: props => () => props.node });\nfunction children(nodes: VNodeChild[]): VNodeChild[] { const result: VNodeChild[] = []; for (const node of nodes) { if (!isVNode(node) || node.type === Comment) continue; if (node.type === Fragment) result.push(...children(node.children as VNodeChild[])); else result.push(node); } return result; }\nconst items = computed(() => children(slots.default?.() ?? []));\nconst layout = computed(() => ({ width: width.value || 800, itemSize: props.itemSize, visibleItems: props.visibleItems, minScale: props.minScale, variant: props.variant, arc: props.arc }));\nconst size = computed(() => cylinderSize(layout.value));\nconst gap = computed(() => layout.value.width / (props.visibleItems + 1));\nlet selected = props.defaultIndex;\nlet mounted = false;\nlet frame = 0;\nlet observer: ResizeObserver | undefined;\nlet wheelTimer: ReturnType<typeof setTimeout> | undefined;\nlet animation: ReturnType<typeof animate> | undefined;\nlet animationVersion = 0;\nlet pointer: { id: number; element: HTMLElement; startX: number; startPosition: number; previousX: number; previousTime: number; x: number; time: number } | undefined;\nuseMotionValueEvent(position, \"change\", value => { displayedPosition.value = value; const count = items.value.length; if (!count) return; const index = (Math.round(value) % count + count) % count; if (index !== selected) { selected = index; emit(\"indexChange\", index); } });\nfunction stop() { ++animationVersion; animation?.stop(); animation = undefined; }\nfunction travel(target: number, velocity = position.getVelocity()) {\n  stop(); if (reduced.value) { position.set(target); return; }\n  animation = animate(position, target, { type: \"spring\", stiffness: 40, damping: 20, mass: 3, velocity, restDelta: .001, restSpeed: .005 });\n}\nfunction settle(velocity: number) { const target = displayedPosition.value + Math.max(-6, Math.min(6, velocity * .45)); travel(props.snap ? Math.round(target) : target, velocity); }\nfunction dropCapture() { const current = pointer; pointer = undefined; if (current) try { if (current.element.hasPointerCapture(current.id)) current.element.releasePointerCapture(current.id); } catch {} }\nfunction down(event: PointerEvent) { if (event.button !== 0 || pointer) return; event.preventDefault(); stop(); const time = performance.now(); const element = event.currentTarget as HTMLElement; pointer = { id: event.pointerId, element, startX: event.clientX, startPosition: position.get(), x: event.clientX, previousX: event.clientX, time, previousTime: time }; try { element.setPointerCapture(event.pointerId); } catch {} }\nfunction move(event: PointerEvent) { const active = pointer; if (!active) return; position.set(active.startPosition - (event.clientX - active.startX) * props.dragSpeed / gap.value); active.previousX = active.x; active.previousTime = active.time; active.x = event.clientX; active.time = performance.now(); }\nfunction up(event: PointerEvent) { const active = pointer; if (!active) return; dropCapture(); const elapsed = active.time - active.previousTime; const velocity = elapsed > 0 ? -(active.x - active.previousX) / elapsed * props.dragSpeed * 1000 / gap.value : 0; settle(velocity); }\nfunction wheel(event: WheelEvent) { stop(); const delta = Math.abs(event.deltaX) > Math.abs(event.deltaY) ? event.deltaX : event.deltaY; position.set(position.get() + delta / gap.value); clearTimeout(wheelTimer); wheelTimer = setTimeout(() => settle(position.getVelocity()), 140); }\nfunction rotate() { cancelAnimationFrame(frame); frame = 0; if (!mounted || !props.autoRotate || reduced.value || !items.value.length) return; let previous = performance.now(); function tick(time: number) { const elapsed = (time - previous) / 1000; previous = time; if (!pointer && !hover.value && !animation) position.set(position.get() + props.autoRotateSpeed * elapsed); frame = requestAnimationFrame(tick); } frame = requestAnimationFrame(tick); }\nwatch([() => props.autoRotate, () => props.autoRotateSpeed, reduced], rotate);\nlet count = 0;\nonMounted(() => { if (root.value) { width.value = root.value.clientWidth; if (typeof ResizeObserver !== \"undefined\") { observer = new ResizeObserver(entries => { width.value = entries[0]?.contentRect.width ?? root.value?.clientWidth ?? 800; }); observer.observe(root.value); } } mounted = true; count = items.value.length; rotate(); });\nonUpdated(() => { if (items.value.length !== count) { count = items.value.length; rotate(); } });\nonBeforeUnmount(() => { mounted = false; cancelAnimationFrame(frame); observer?.disconnect(); clearTimeout(wheelTimer); stop(); dropCapture(); });\n</script>\n<template>\n  <div ref=\"root\" role=\"application\" aria-roledescription=\"carousel\" aria-label=\"Cylinder carousel\" tabindex=\"0\" class=\"relative w-full touch-none select-none [-webkit-touch-callout:none] cursor-grab outline-none [clip-path:inset(0)] active:cursor-grabbing focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-ring/50\" :style=\"{ height: `${height ?? size}px` }\" @keydown.right.prevent=\"travel(Math.round(displayedPosition) + 1)\" @keydown.left.prevent=\"travel(Math.round(displayedPosition) - 1)\" @wheel=\"wheel\" @pointerdown=\"down\" @pointermove=\"move\" @pointerup=\"up\" @pointercancel=\"up\" @pointerenter=\"hover = true\" @pointerleave=\"hover = false\">\n    <motion.div v-for=\"(node, index) in items\" :key=\"index\" class=\"absolute left-1/2 top-1/2\" :style=\"{ width: `${size}px`, height: `${size}px`, marginLeft: `${-size / 2}px`, marginTop: `${-size / 2}px` }\" :animate=\"cylinderProjection(index, displayedPosition, items.length, layout, size)\" :transition=\"{ duration: 0 }\"><RenderNode :node=\"node\" /></motion.div>\n  </div>\n</template>\n"],"mappings":"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"}