@ulu/frontend-vue 0.6.34 → 0.6.36

package/dist/plugins/tour/UluTourContent.vue.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"UluTourContent.vue.d.ts","sourceRoot":"","sources":["../../../lib/plugins/tour/UluTourContent.vue"],"names":[],"mappings":"AAeA;"}
+{"version":3,"file":"UluTourContent.vue.d.ts","sourceRoot":"","sources":["../../../lib/plugins/tour/UluTourContent.vue"],"names":[],"mappings":"AA2BA;"}

package/dist/plugins/tour/UluTourContent.vue.js

@@ -1,7 +1,10 @@
-import { computed as c, createElementBlock as a, openBlock as o, createBlock as i, createCommentVNode as l, createVNode as u, resolveDynamicComponent as m, normalizeClass as d, withCtx as p, createTextVNode as f, toDisplayString as r } from "vue";
-import C from "../../components/elements/UluRule.vue.js";
-import { useTour as h } from "./useTour.js";
-const v = { class: "tour-content crop-margins" }, y = { key: 1 }, M = {
+import { computed as r, createElementBlock as a, openBlock as o, createBlock as f, createCommentVNode as l, createVNode as h, resolveDynamicComponent as C, normalizeClass as c, withCtx as _, createElementVNode as u, toDisplayString as n } from "vue";
+import y from "../../components/elements/UluRule.vue.js";
+import { useTour as P } from "./useTour.js";
+const k = { class: "tour-content crop-margins" }, x = { class: "tour-content__title-text" }, T = {
+  key: 1,
+  class: "tour-content__body"
+}, V = {
   __name: "UluTourContent",
   props: {
     /**
@@ -19,23 +22,28 @@ const v = { class: "tour-content crop-margins" }, y = { key: 1 }, M = {
       default: !1
     }
   },
-  setup(e) {
-    const { state: s } = h(), t = e, n = c(() => t.step.titleClass ? t.step.titleClass : t.isModal ? s.active?.modalTitleClass || ["h3", "no-margin"] : s.active?.popoverTitleClass || ["h4", "display-block", "no-margin"]);
-    return (k, T) => (o(), a("div", v, [
-      e.step?.title ? (o(), i(m(e.isModal ? "h2" : "strong"), {
+  setup(t) {
+    const { state: e } = P(), s = t, d = r(() => s.step.titleClass ? s.step.titleClass : s.isModal ? e.active?.modalTitleClass || ["h3", "no-margin"] : e.active?.popoverTitleClass || ["h4", "display-block", "no-margin"]), p = r(() => s.step.progressClass || e.active?.progressClass || "headline-label"), m = r(() => e.stepIndex + 1), g = r(() => e.active?.steps?.length || 0), v = r(() => s.step.hideProgress !== void 0 ? !s.step.hideProgress : e.active?.hideProgress !== void 0 ? !e.active.hideProgress : !0);
+    return (b, i) => (o(), a("div", k, [
+      t.step?.title ? (o(), f(C(t.isModal ? "h2" : "strong"), {
         key: 0,
-        class: d(n.value)
+        class: c(["tour-content__title", d.value])
       }, {
-        default: p(() => [
-          f(r(e.step.title), 1)
+        default: _(() => [
+          v.value ? (o(), a("span", {
+            key: 0,
+            class: c(["tour-content__title-progress", p.value])
+          }, " Part " + n(m.value) + " / " + n(g.value), 3)) : l("", !0),
+          i[0] || (i[0] = u("span", { class: "hidden-visually" }, ":", -1)),
+          u("span", x, n(t.step.title), 1)
         ]),
         _: 1
       }, 8, ["class"])) : l("", !0),
-      u(C),
-      e.step?.content ? (o(), a("p", y, r(e.step.content), 1)) : l("", !0)
+      h(y),
+      t.step?.content ? (o(), a("p", T, n(t.step.content), 1)) : l("", !0)
     ]));
   }
 };
 export {
-  M as default
+  V as default
 };

package/dist/plugins/tour/UluTourDisplay.vue.js

@@ -1,37 +1,44 @@
-import { computed as l, ref as h, watch as z, nextTick as L, onMounted as F, onUnmounted as I, createBlock as a, openBlock as n, Teleport as M, createElementBlock as $, createCommentVNode as k, unref as r, Fragment as R, resolveDynamicComponent as p, mergeProps as d, createSlots as w, withCtx as f, normalizeStyle as D } from "vue";
-import U from "../../components/collapsible/UluModal.vue.js";
-import V from "../popovers/UluPopoverBase.vue.js";
-import q from "./UluTourPager.vue.js";
-import P from "./UluTourContent.vue.js";
-import { useTour as N } from "./useTour.js";
-const Q = {
+import { computed as r, ref as h, unref as n, watch as M, nextTick as $, onMounted as R, onUnmounted as q, createBlock as a, openBlock as u, Teleport as U, createElementBlock as P, createCommentVNode as S, Fragment as V, resolveDynamicComponent as i, mergeProps as d, createSlots as _, withCtx as y, normalizeStyle as H } from "vue";
+import N from "../../components/collapsible/UluModal.vue.js";
+import O from "../popovers/UluPopoverBase.vue.js";
+import j from "./UluTourPager.vue.js";
+import E from "./UluTourContent.vue.js";
+import { useTour as A } from "./useTour.js";
+const Z = {
   __name: "UluTourDisplay",
-  setup(O) {
-    const { api: i, state: o } = N(), t = l(() => o.active?.steps[o.stepIndex]), y = l(() => t.value?.component || o.active?.component), c = l(() => t.value?.contentComponent || o.active?.contentComponent), C = l(() => t.value?.pagerComponent || o.active?.pagerComponent || q), _ = l(() => t.value?.modalComponent || o.active?.modalComponent || U), S = l(() => t.value?.popoverComponent || o.active?.popoverComponent || V), v = h(null), g = h(null), E = l(() => ({
+  setup(G) {
+    const { api: s, state: l } = A(), t = r(() => l.active?.steps[l.stepIndex]), w = r(() => t.value?.component || l.active?.component), f = r(() => t.value?.contentComponent || l.active?.contentComponent), x = r(() => t.value?.pagerComponent || l.active?.pagerComponent || j), T = r(() => t.value?.modalComponent || l.active?.modalComponent || N), B = r(() => t.value?.popoverComponent || l.active?.popoverComponent || O), v = h(null), g = h(null), C = h(null), k = r(() => {
+      const e = n(t.value?.target);
+      return typeof e == "function" ? n(e()) : e;
+    }), b = r(() => {
+      const e = n(t.value?.highlightElement);
+      return typeof e == "function" ? n(e()) : e;
+    }), z = r(() => ({
       placement: t.value?.placement || "bottom",
       arrow: !0,
       offset: 8
-    })), B = l(() => ({
-      ...o.active?.modalProps || {},
+    })), L = r(() => ({
+      ...l.active?.modalProps || {},
       ...t.value?.modalProps || {}
-    })), T = l(() => ({
+    })), F = r(() => ({
       modifiers: "large",
-      ...o.active?.popoverProps || {},
+      ...l.active?.popoverProps || {},
       ...t.value?.popoverProps || {}
-    })), s = h(null), m = () => {
-      if (v.value) {
-        const e = v.value.getBoundingClientRect();
-        s.value = {
-          top: e.top,
-          left: e.left,
-          width: e.width,
-          height: e.height
+    })), m = h(null), c = () => {
+      const e = g.value || v.value;
+      if (e) {
+        const o = e.getBoundingClientRect();
+        m.value = {
+          top: o.top,
+          left: o.left,
+          width: o.width,
+          height: o.height
         };
       } else
-        s.value = null;
-    }, b = l(() => {
-      if (!s.value) return {};
-      const e = s.value;
+        m.value = null;
+    }, I = r(() => {
+      if (!m.value) return {};
+      const e = m.value;
       return {
         position: "fixed",
         top: 0,
@@ -56,44 +63,51 @@ const Q = {
       )`
       };
     });
-    return z(t, async (e) => {
-      if (e?.target) {
-        await L();
-        const u = document.querySelector(e.target);
-        u ? (v.value = u, g.value && g.value.update(), e.highlight && m()) : console.warn(`Tour target not found: ${e.target}`);
+    return M([k, b], async ([e, o]) => {
+      if (e) {
+        await $();
+        const p = typeof e == "string" ? document.querySelector(e) : n(e);
+        p ? (v.value = p, C.value && C.value.update()) : (console.warn("Tour target not found:", e), v.value = null);
       } else
-        v.value = null, s.value = null;
-    }, { immediate: !0 }), F(() => {
-      window.addEventListener("resize", m), window.addEventListener("scroll", m);
-    }), I(() => {
-      window.removeEventListener("resize", m), window.removeEventListener("scroll", m);
-    }), (e, u) => (n(), a(M, { to: "body" }, [
-      r(o).active ? (n(), $(R, { key: 0 }, [
-        y.value ? (n(), a(p(y.value), d({
+        v.value = null;
+      if (o) {
+        await $();
+        const p = typeof o == "string" ? document.querySelector(o) : n(o);
+        p ? g.value = p : (console.warn("Tour highlight element not found:", o), g.value = null);
+      } else
+        g.value = null;
+      t.value?.highlight && c();
+    }, { immediate: !0 }), R(() => {
+      window.addEventListener("resize", c), window.addEventListener("scroll", c);
+    }), q(() => {
+      window.removeEventListener("resize", c), window.removeEventListener("scroll", c);
+    }), (e, o) => (u(), a(U, { to: "body" }, [
+      n(l).active ? (u(), P(V, { key: 0 }, [
+        w.value ? (u(), a(i(w.value), d({
           key: 0,
           "data-ulu-tour-ui": "true",
           step: t.value,
-          tourState: r(o),
-          api: r(i)
-        }, t.value.componentProps), null, 16, ["step", "tourState", "api"])) : t.value?.target ? (n(), a(p(S.value), d({
+          tourState: n(l),
+          api: n(s)
+        }, t.value.componentProps), null, 16, ["step", "tourState", "api"])) : k.value ? (u(), a(i(B.value), d({
           key: 2,
           ref_key: "popoverBase",
-          ref: g,
+          ref: C,
           trigger: v.value,
-          config: E.value,
+          config: z.value,
           style: { zIndex: 9999 },
           isOpen: !0,
           "data-ulu-tour-ui": "true",
-          onClose: u[1] || (u[1] = (x) => r(i).stop())
-        }, T.value), w({
-          default: f(() => [
-            c.value ? (n(), a(p(c.value), d({
+          onClose: o[1] || (o[1] = (p) => n(s).stop())
+        }, F.value), _({
+          default: y(() => [
+            f.value ? (u(), a(i(f.value), d({
               key: 0,
               step: t.value,
-              tourState: r(o),
-              api: r(i),
+              tourState: n(l),
+              api: n(s),
               "is-modal": !1
-            }, t.value.componentProps), null, 16, ["step", "tourState", "api"])) : (n(), a(P, {
+            }, t.value.componentProps), null, 16, ["step", "tourState", "api"])) : (u(), a(E, {
               key: 1,
               step: t.value,
               "is-modal": !1
@@ -103,26 +117,26 @@ const Q = {
         }, [
           t.value?.hideFooter ? void 0 : {
             name: "footer",
-            fn: f(() => [
-              (n(), a(p(C.value)))
+            fn: y(() => [
+              (u(), a(i(x.value)))
             ]),
             key: "0"
           }
-        ]), 1040, ["trigger", "config"])) : (n(), a(p(_.value), d({
+        ]), 1040, ["trigger", "config"])) : (u(), a(i(T.value), d({
           key: 1,
           modelValue: !0,
           "data-ulu-tour-ui": "true"
-        }, B.value, {
-          onClose: u[0] || (u[0] = (x) => r(i).stop())
-        }), w({
-          default: f(() => [
-            c.value ? (n(), a(p(c.value), d({
+        }, L.value, {
+          onClose: o[0] || (o[0] = (p) => n(s).stop())
+        }), _({
+          default: y(() => [
+            f.value ? (u(), a(i(f.value), d({
               key: 0,
               step: t.value,
-              tourState: r(o),
-              api: r(i),
+              tourState: n(l),
+              api: n(s),
               "is-modal": !0
-            }, t.value.componentProps), null, 16, ["step", "tourState", "api"])) : (n(), a(P, {
+            }, t.value.componentProps), null, 16, ["step", "tourState", "api"])) : (u(), a(E, {
               key: 1,
               step: t.value,
               "is-modal": !0
@@ -132,23 +146,23 @@ const Q = {
         }, [
           t.value?.hideFooter ? void 0 : {
             name: "footer",
-            fn: f(() => [
-              (n(), a(p(C.value)))
+            fn: y(() => [
+              (u(), a(i(x.value)))
             ]),
             key: "0"
           }
         ]), 1040)),
-        t.value?.target && t.value?.highlight && s.value ? (n(), $("div", {
+        t.value?.target && t.value?.highlight && m.value ? (u(), P("div", {
           key: 3,
           class: "tour-highlight-backdrop",
-          style: D(b.value),
+          style: H(I.value),
           "data-ulu-tour-ui": "true",
-          onClick: u[2] || (u[2] = (x) => r(i).stop())
-        }, null, 4)) : k("", !0)
-      ], 64)) : k("", !0)
+          onClick: o[2] || (o[2] = (p) => n(s).stop())
+        }, null, 4)) : S("", !0)
+      ], 64)) : S("", !0)
     ]));
   }
 };
 export {
-  Q as default
+  Z as default
 };

package/dist/plugins/tour/api.d.ts

@@ -1,9 +1,13 @@
 export function createApi(state: Object): Object;
 export type TourStep = {
     /**
-     * - The CSS selector for the target element. If omitted, step renders as a modal.
+     * - The CSS selector, DOM element, or function returning either, for the target element. If omitted or resolves to falsy, step renders as a modal.
      */
-    target?: string | undefined;
+    target?: string | Function | HTMLElement | undefined;
+    /**
+     * - Element to highlight if different from target. Falls back to target if not provided.
+     */
+    highlightElement?: string | Function | HTMLElement | undefined;
     /**
      * - The title text for the step.
      */
@@ -16,6 +20,10 @@ export type TourStep = {
      * - Class to apply to the pager footer.
      */
     pagerClass?: string | Object | any[] | undefined;
+    /**
+     * - Class to apply to the progress indicator.
+     */
+    progressClass?: string | Object | any[] | undefined;
     /**
      * - The content text for the step.
      */
@@ -36,6 +44,10 @@ export type TourStep = {
      * - If true, hides the default tour footer (Next/Back buttons).
      */
     hideFooter?: boolean | undefined;
+    /**
+     * - If true, hides the "Part X / Y" progress indicator for this step.
+     */
+    hideProgress?: boolean | undefined;
     /**
      * - Floating UI placement string (e.g. 'bottom', 'right').
      */
@@ -44,6 +56,10 @@ export type TourStep = {
      * - If true, darkens the backdrop around the target element.
      */
     highlight?: boolean | undefined;
+    /**
+     * - If true or returns true, this step will be skipped when navigating the tour.
+     */
+    skip?: boolean | Function | undefined;
     /**
      * - Props to pass to the modal (if target is omitted).
      */

package/dist/plugins/tour/api.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"api.d.ts","sourceRoot":"","sources":["../../../lib/plugins/tour/api.js"],"names":[],"mappings":"AA0BO,iCAHI,MAAM,GACJ,MAAM,CAkHjB"}
+{"version":3,"file":"api.d.ts","sourceRoot":"","sources":["../../../lib/plugins/tour/api.js"],"names":[],"mappings":"AA8BO,iCAHI,MAAM,GACJ,MAAM,CAgJjB"}

package/dist/plugins/tour/api.js

@@ -1,5 +1,5 @@
-import { markRaw as s } from "vue";
-const r = (n) => ({
+import { markRaw as o } from "vue";
+const a = (n) => ({
   /**
    * Starts a new tour
    * @param {Object} tour - The tour configuration object
@@ -10,6 +10,8 @@ const r = (n) => ({
    * @param {String|Array|Object} [tour.modalTitleClass] - Global class applied to the title of modal steps.
    * @param {String|Array|Object} [tour.popoverTitleClass] - Global class applied to the title of popover steps.
    * @param {String|Array|Object} [tour.pagerClass] - Global class applied to the pager.
+   * @param {String|Array|Object} [tour.progressClass] - Global class applied to the progress indicator.
+   * @param {Boolean} [tour.hideProgress] - Globally hides the progress indicator for all steps unless overridden.
    * @param {Function} [tour.onStart] - Async hook called before the tour starts.
    * @param {Function} [tour.onStop] - Async hook called when the tour is closed/finished.
    */
@@ -18,7 +20,18 @@ const r = (n) => ({
       n.isTransitioning = !0;
       try {
         if (!i?.steps?.length) return;
-        typeof i.onStart == "function" && await i.onStart(), await this._runHooks(i.steps[0]), n.active = s(i), n.stepIndex = 0;
+        typeof i.onStart == "function" && await i.onStart();
+        let s = 0;
+        for (; s < i.steps.length; ) {
+          const e = i.steps[s];
+          if (!(typeof e.skip == "function" ? await e.skip() : e.skip)) break;
+          s++;
+        }
+        if (s >= i.steps.length) {
+          typeof i.onStop == "function" && await i.onStop();
+          return;
+        }
+        await this._runHooks(i.steps[s]), n.active = o(i), n.stepIndex = s;
       } finally {
         n.isTransitioning = !1;
       }
@@ -33,12 +46,13 @@ const r = (n) => ({
     if (i) {
       n.isTransitioning = !0;
       try {
-        if (n.stepIndex < i.steps.length - 1) {
-          await this._runLeaveHook(i.steps[n.stepIndex]);
-          const e = n.stepIndex + 1;
-          await this._runHooks(i.steps[e]), n.stepIndex = e;
-        } else
-          await this.stop(!0);
+        let s = n.stepIndex + 1;
+        for (; s < i.steps.length; ) {
+          const e = i.steps[s];
+          if (!(typeof e.skip == "function" ? await e.skip() : e.skip)) break;
+          s++;
+        }
+        s < i.steps.length ? (await this._runLeaveHook(i.steps[n.stepIndex]), await this._runHooks(i.steps[s]), n.stepIndex = s) : await this.stop(!0);
       } finally {
         n.isTransitioning = !1;
       }
@@ -53,11 +67,13 @@ const r = (n) => ({
     if (i) {
       n.isTransitioning = !0;
       try {
-        if (n.stepIndex > 0) {
-          await this._runLeaveHook(i.steps[n.stepIndex]);
-          const e = n.stepIndex - 1;
-          await this._runHooks(i.steps[e]), n.stepIndex = e;
+        let s = n.stepIndex - 1;
+        for (; s >= 0; ) {
+          const e = i.steps[s];
+          if (!(typeof e.skip == "function" ? await e.skip() : e.skip)) break;
+          s--;
         }
+        s >= 0 && (await this._runLeaveHook(i.steps[n.stepIndex]), await this._runHooks(i.steps[s]), n.stepIndex = s);
       } finally {
         n.isTransitioning = !1;
       }
@@ -71,8 +87,8 @@ const r = (n) => ({
     if (!(!i && n.isTransitioning)) {
       n.isTransitioning = !0;
       try {
-        const e = n.active;
-        e && (e.steps[n.stepIndex] && await this._runLeaveHook(e.steps[n.stepIndex]), typeof e.onStop == "function" && await e.onStop()), n.active = null, n.stepIndex = 0;
+        const s = n.active;
+        s && (s.steps[n.stepIndex] && await this._runLeaveHook(s.steps[n.stepIndex]), typeof s.onStop == "function" && await s.onStop()), n.active = null, n.stepIndex = 0;
       } finally {
         n.isTransitioning = !1;
       }
@@ -94,5 +110,5 @@ const r = (n) => ({
   }
 });
 export {
-  r as createApi
+  a as createApi
 };

package/lib/plugins/tour/UluTourContent.vue

@@ -2,13 +2,25 @@
   <div class="tour-content crop-margins">
     <component 
       v-if="step?.title"
+      class="tour-content__title"
       :is="isModal ? 'h2' : 'strong'" 
       :class="resolvedTitleClass"
     >
-      {{ step.title }}
+      <span 
+        v-if="showProgress" 
+        class="tour-content__title-progress"
+        :class="resolvedProgressClass"
+      >
+        Part {{ currentProgress }} / {{ totalProgress }}
+      </span>
+      <span class="hidden-visually">:</span>
+      <span class="tour-content__title-text">{{ step.title }}</span>
     </component>
     <UluRule />
-    <p v-if="step?.content">
+    <p 
+      class="tour-content__body"
+      v-if="step?.content"
+    >
       {{ step.content }}
     </p>
   </div>
@@ -47,4 +59,22 @@
       return tourState.active?.popoverTitleClass || ['h4', 'display-block', 'no-margin'];
     }
   });
+
+  const resolvedProgressClass = computed(() => {
+    return props.step.progressClass || tourState.active?.progressClass || 'headline-label';
+  });
+
+  const currentProgress = computed(() => tourState.stepIndex + 1);
+  
+  const totalProgress = computed(() => tourState.active?.steps?.length || 0);
+  
+  const showProgress = computed(() => {
+    if (props.step.hideProgress !== undefined) {
+      return !props.step.hideProgress;
+    }
+    if (tourState.active?.hideProgress !== undefined) {
+      return !tourState.active.hideProgress;
+    }
+    return true;
+  });
 </script>

package/lib/plugins/tour/UluTourDisplay.vue

@@ -15,7 +15,7 @@
 
       <!-- 2. RENDER MODAL STEP -->
       <component 
-        v-else-if="!currentStep?.target" 
+        v-else-if="!resolvedTargetDescriptor" 
         :is="resolvedModalComponent"
         :modelValue="true"
         data-ulu-tour-ui="true"
@@ -80,7 +80,7 @@
 </template>
 
 <script setup>
-  import { ref, computed, watch, nextTick, onMounted, onUnmounted } from 'vue';
+  import { ref, computed, watch, nextTick, onMounted, onUnmounted, unref } from 'vue';
   import UluModal from '../../components/collapsible/UluModal.vue';
   import UluPopoverBase from '../popovers/UluPopoverBase.vue';
   import UluTourPager from './UluTourPager.vue';
@@ -100,8 +100,21 @@
 
   // Floating UI Setup for Popovers
   const targetEl = ref(null);
+  const highlightEl = ref(null);
   const popoverBase = ref(null);
 
+  const resolvedTargetDescriptor = computed(() => {
+    const t = unref(currentStep.value?.target);
+    if (typeof t === 'function') return unref(t());
+    return t;
+  });
+
+  const resolvedHighlightDescriptor = computed(() => {
+    const h = unref(currentStep.value?.highlightElement);
+    if (typeof h === 'function') return unref(h());
+    return h;
+  });
+
   const resolvedConfig = computed(() => ({
     placement: currentStep.value?.placement || 'bottom',
     arrow: true,
@@ -128,8 +141,9 @@
   const targetRect = ref(null);
   
   const updateTargetRect = () => {
-    if (targetEl.value) {
-      const rect = targetEl.value.getBoundingClientRect();
+    const el = highlightEl.value || targetEl.value;
+    if (el) {
+      const rect = el.getBoundingClientRect();
       targetRect.value = {
         top: rect.top,
         left: rect.left,
@@ -169,11 +183,11 @@
     };
   });
 
-  // Watch for step changes to update floating UI target
-  watch(currentStep, async (step) => {
-    if (step?.target) {
+  // Watch for step changes to update floating UI target and highlight target
+  watch([resolvedTargetDescriptor, resolvedHighlightDescriptor], async ([targetDesc, highlightDesc]) => {
+    if (targetDesc) {
       await nextTick();
-      const el = document.querySelector(step.target);
+      const el = typeof targetDesc === 'string' ? document.querySelector(targetDesc) : unref(targetDesc);
       if (el) {
         targetEl.value = el;
         // UluPopoverBase's isOpen watcher automatically calls update(), 
@@ -182,15 +196,29 @@
         if (popoverBase.value) {
           popoverBase.value.update();
         }
-        if (step.highlight) {
-          updateTargetRect();
-        }
       } else {
-        console.warn(`Tour target not found: ${step.target}`);
+        console.warn(`Tour target not found:`, targetDesc);
+        targetEl.value = null;
       }
     } else {
       targetEl.value = null;
-      targetRect.value = null;
+    }
+
+    if (highlightDesc) {
+      await nextTick();
+      const hEl = typeof highlightDesc === 'string' ? document.querySelector(highlightDesc) : unref(highlightDesc);
+      if (hEl) {
+        highlightEl.value = hEl;
+      } else {
+        console.warn(`Tour highlight element not found:`, highlightDesc);
+        highlightEl.value = null;
+      }
+    } else {
+      highlightEl.value = null;
+    }
+
+    if (currentStep.value?.highlight) {
+      updateTargetRect();
     }
   }, { immediate: true });