@bagelink/vue 1.15.154 → 1.15.156

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@bagelink/vue",
   "type": "module",
-  "version": "1.15.154",
+  "version": "1.15.156",
   "description": "Bagel core sdk packages",
   "author": {
     "name": "Bagel Studio",

package/src/components/charts/BarChart.vue

@@ -177,7 +177,7 @@ const tooltipStyle = computed(() => {
 			</svg>
 
 			<ChartTooltip
-				v-if="hoverIdx != null" :style="tooltipStyle"
+				v-if="hoverIdx != null" prefer="top" :style="tooltipStyle"
 				:label="hoverLabel" :rows="hoverRows" :total="hoverTotal"
 			/>
 		</div>

package/src/components/charts/ChartTooltip.vue

@@ -6,7 +6,13 @@
  *
  * Positioned by the host via `style` (absolute left/top); the host owns
  * mouse tracking. Non-interactive (pointer-events: none).
+ *
+ * Placement is dynamic by default: the tooltip measures itself and flips to
+ * the opposite side of its anchor whenever the preferred side would clip past
+ * the top/bottom of the viewport. Hosts only express a *preferred* side via
+ * `prefer` (or the legacy `above`/`below` flags).
  */
+import { nextTick, ref, watch } from 'vue'
 import { useI18n } from '@bagelink/vue'
 
 export interface TipRow { name: string; color?: string; value: string }
@@ -16,41 +22,95 @@ defineOptions({ name: 'BglChartTooltip' })
 
 const { $t } = useI18n()
 
-withDefaults(defineProps<{
+const props = withDefaults(defineProps<{
 	label?: string
 	/** Big focal number (used by single-value charts like the funnel). */
 	hero?: string
 	rows?: TipRow[]
 	total?: string | null
 	stats?: TipStat[]
-	/** Float above the anchor point instead of below it. */
+	/** Preferred side relative to the anchor point. The tooltip still flips to
+	    the opposite side automatically when the preferred side would clip.
+	    - `above`/`below`: cursor-anchored charts (a small gap is kept).
+	    - `top`: pinned to the top of the chart (no vertical flip). */
+	prefer?: 'above' | 'below' | 'top'
+	/** @deprecated use `prefer="above"`. Float above the anchor point. */
 	above?: boolean
+	/** @deprecated use `prefer="below"`. Float below the anchor point. */
+	below?: boolean
 }>(), {
 	rows: () => [],
 	stats: () => [],
+	prefer: 'below',
 })
+
+// Resolve the caller's preferred side (new `prefer` prop wins; fall back to the
+// legacy boolean flags for compatibility).
+function preferredSide(): 'above' | 'below' | 'top' {
+	if (props.above) return 'above'
+	if (props.below) return 'below'
+	return props.prefer
+}
+
+const el = ref<HTMLElement>()
+// The side actually used after measuring (may differ from the preferred one).
+const side = ref<'above' | 'below' | 'top'>(preferredSide())
+
+/**
+ * Place the tooltip by the anchor's position in the viewport:
+ * anchors in the top half get the tooltip *below* them, anchors in the
+ * bottom half get it *above*. `top` placements are pinned to the chart and
+ * never flip.
+ */
+function place() {
+	const node = el.value
+	const want = preferredSide()
+	if (!node || want === 'top') { side.value = want; return }
+
+	// Normalize to the `below` transform first so the measured `top` always
+	// reflects the stable anchor point (not a post-flip offset), avoiding
+	// flip-flop right around the midpoint.
+	side.value = 'below'
+	nextTick(() => {
+		const n = el.value
+		if (!n) return
+		const r = n.getBoundingClientRect()
+		side.value = r.top < window.innerHeight / 2 ? 'below' : 'above'
+	})
+}
+
+// Re-place whenever the anchor moves or the content changes.
+watch(
+	() => [props.label, props.hero, props.total, props.rows, props.stats, props.prefer, props.above, props.below],
+	place,
+	{ immediate: true, deep: true },
+)
 </script>
 
 <template>
-	<div class="bgl-tip absolute pointer-events-none nowrap z-5 color-white line-height-13" :class="{ 'bgl-tip--above': above }">
-		<p v-if="label" class="bgl-tip__label m-0">{{ label }}</p>
-		<p v-if="hero" class="bgl-tip__hero m-0 tabular-nums">{{ hero }}</p>
+	<div
+		ref="el"
+		class="bgl-tip absolute top-0 pointer-events-none nowrap z-5 color-white line-height-16"
+		:class="{ 'bgl-tip--above': side === 'above', 'bgl-tip--below': side === 'below' }"
+	>
+		<p v-if="label" class="opacity-7 txt-075rem m-0 pb-025 ">{{ label }}</p>
+		<p v-if="hero" class="m-0 tabular-nums bold pb-025 txt-1-25rem">{{ hero }}</p>
 
-		<p v-for="(r, i) in rows" :key="i" class="bgl-tip__row flex align-items-center m-0">
+		<p v-for="(r, i) in rows" :key="i" class="gap-05 flex align-items-center m-0">
 			<span v-if="r.color" class="bgl-tip__dot flex-shrink-0" :style="{ background: r.color }" />
 			<span v-if="rows.length > 1" class="bgl-tip__name">{{ r.name }}</span>
-			<span class="bgl-tip__val tabular-nums">{{ r.value }}</span>
+			<span class="ms-auto tabular-nums semibold">{{ r.value }}</span>
 		</p>
 
-		<p v-if="total" class="bgl-tip__row bgl-tip__total flex align-items-center m-0">
+		<p v-if="total" class="gap-05 bgl-tip__total flex align-items-center m-0">
 			<span class="bgl-tip__name">{{ $t('charts.total') }}</span>
-			<span class="bgl-tip__val tabular-nums">{{ total }}</span>
+			<span class="ms-auto tabular-nums semibold">{{ total }}</span>
 		</p>
 
 		<div v-if="stats.length" class="bgl-tip__stats flex column">
-			<p v-for="(s, i) in stats" :key="i" class="bgl-tip__row flex align-items-center m-0">
+			<p v-for="(s, i) in stats" :key="i" class="gap-05 flex align-items-center m-0 space-between">
 				<span class="bgl-tip__name">{{ s.label }}</span>
-				<span class="bgl-tip__val tabular-nums">{{ s.value }}</span>
+				<span class="ms-auto tabular-nums semibold">{{ s.value }}</span>
 			</p>
 		</div>
 	</div>
@@ -58,17 +118,14 @@ withDefaults(defineProps<{
 
 <style scoped>
 .bgl-tip {
-	top: 0; transform: translateX(-50%); transform-origin: center;
+	transform: translateX(-50%); transform-origin: center;
 	background: var(--bgl-black); border-radius: 0.5rem; padding: 0.4rem 0.6rem;
 	font-size: 0.75rem; box-shadow: 0 4px 16px rgba(0, 0, 0, 0.18); min-width: 7rem;
 }
 .bgl-tip--above { transform: translate(-50%, calc(-100% - 0.6rem)); }
-.bgl-tip__label { margin-bottom: 0.2rem; opacity: 0.7; font-size: 0.7rem; }
-.bgl-tip__hero { margin-bottom: 0.2rem; font-size: 1.05rem; font-weight: 700; }
-.bgl-tip__row { gap: 0.4rem; }
+.bgl-tip--below { transform: translate(-50%, 0.6rem); }
 .bgl-tip__dot { width: 8px; height: 8px; border-radius: 2px; }
 .bgl-tip__name { opacity: 0.7; }
-.bgl-tip__val { margin-inline-start: auto; font-weight: 600; }
 .bgl-tip__total,
 .bgl-tip__stats {
 	margin-top: 0.28rem; padding-top: 0.28rem;

package/src/components/charts/Donut.vue

@@ -190,7 +190,7 @@ const tooltipStyle = computed(() => ({ left: `${tipX.value}px`, top: `${tipY.val
 				<span v-if="centerLabel" class="color-gray txt12">{{ centerLabel }}</span>
 			</div>
 			<ChartTooltip
-				v-if="hoverArc" above :style="tooltipStyle"
+				v-if="hoverArc" prefer="above" :style="tooltipStyle"
 				:label="hoverArc.label" :hero="hoverValue" :stats="hoverStats"
 			/>
 		</div>

package/src/components/charts/Funnel.vue

@@ -292,7 +292,7 @@ const tooltipStyle = computed(() => ({ left: `${tipX.value}px`, top: `${tipY.val
 
 			<!-- Shared tooltip -->
 			<ChartTooltip
-				v-if="hoverStage" above :style="tooltipStyle"
+				v-if="hoverStage" prefer="above" :style="tooltipStyle"
 				:label="hoverStage.label"
 				:hero="isSegmented ? undefined : hoverStage.display"
 				:rows="isSegmented ? hoverStage.rows : []"

package/src/components/charts/LineChart.vue

@@ -231,7 +231,7 @@ const tooltipStyle = computed(() => {
 
 		<!-- shared tooltip following the mouse -->
 		<ChartTooltip
-			v-if="hoverIdx != null" :style="tooltipStyle"
+			v-if="hoverIdx != null" prefer="top" :style="tooltipStyle"
 			:label="hoverLabel" :rows="hoverRows" :total="hoverTotal"
 		/>
 	</div>