@shijiu/jsview-vue 0.9.684 → 0.9.766

package/samples/DemoHomepage/views/Homepage.vue

@@ -1,5 +1,6 @@
-<script>
-import { jJsvRuntimeBridge, EdgeDirection } from "jsview";
+<script setup>
+import { computed, shallowRef, onActivated } from "vue";
+import { jJsvRuntimeBridge, EdgeDirection, useFocusHub } from "jsview";
 import TabFrame from "../components/TabFrame.vue";
 import BodyFrame from "../components/BodyFrame.vue";
 import Dialog from "../components/Dialog.vue";
@@ -27,100 +28,88 @@ for (let item of routeList) {
 }
 const dataList = [featureData, metroWidgetData];
 
-export default {
-  components: {
-    TabFrame,
-    Dialog,
-    BodyFrame,
-  },
-  data() {
-    return {
-      showExitDialog: false,
-      contentData: dataList[0],
-      tabId: 0,
-      preFocusName: "",
-      curFocusName: "",
-    };
-  },
-  setup() {
-    return {
-      name: "/home",
-    };
-  },
-  computed: {
-    address() {
-      return window.localStorage.href;
-    },
-  },
-  methods: {
-    onFocus() {
-      this.changeFocus(this.name + "/bodyFrame");
-    },
-    onKeyDown(ev) {
-      // 处理返回键
-      if (
-        ev.keyCode == 8 || // Backspace
-        ev.keyCode == 27 || // Escape
-        ev.keyCode == 10000 // 盒子返回键
-      ) {
-        this.showExitDialog = !this.showExitDialog;
-        if (!this.showExitDialog) {
-          this.changeFocus(this.preFocusName);
-        } else {
-          this.preFocusName = this.curFocusName;
-          this.curFocusName = this.name + "/exitDialog";
-        }
-      }
-      return true;
-    },
-    changeFocus(name) {
-      this.preFocusName = this.curFocusName;
-      this.curFocusName = name;
-      this.$refs.rootNode.findBlockByName(name).requestFocus();
-    },
-    onTabEdge(edgeInfo) {
-      if (edgeInfo.direction === EdgeDirection.bottom) {
-        this.changeFocus(this.name + "/bodyFrame");
-      }
-    },
-    onContentEdge(edgeInfo) {
-      if (edgeInfo.direction === EdgeDirection.top) {
-        this.changeFocus(this.name + "/tabFrame");
-      }
-    },
-    tabItemFocus(data) {
-      if (data.id != this.tabId) {
-        this.tabId = data.id;
-        this.contentData = dataList[this.tabId];
-      }
-    },
-    onDialogAction(msg) {
-      this.showExitDialog = false;
-      this.changeFocus(this.preFocusName);
-      switch (msg) {
-        case "ok":
-          jJsvRuntimeBridge.closePage();
-          // if (!window.JsView) {
-          //   // 浏览器调试
-          //   window.location.href = "about:blank";
-          // }
-          break;
-        case "back":
-        case "cancel":
-          break;
-      }
-    },
-  },
-  created() {
-    if (typeof localStorage.curTab !== "undefined") {
-      this.tabId = parseInt(localStorage.curTab);
+let showExitDialog = shallowRef(false);
+let contentData = shallowRef(dataList[0]);
+let tabId = shallowRef(0);
+
+let preFocusName = "";
+let curFocusName = "";
+let name = "/home";
+
+let focusHub = useFocusHub();
+
+let address = computed(() => {
+  return window.localStorage.href;
+});
+
+let onFocus = () => {
+  changeFocus(name + "/bodyFrame");
+};
+
+let onKeyDown = (ev) => {
+  // 处理返回键
+  if (
+    ev.keyCode == 8 || // Backspace
+    ev.keyCode == 27 || // Escape
+    ev.keyCode == 10000 // 盒子返回键
+  ) {
+    showExitDialog.value = !showExitDialog.value;
+    if (!showExitDialog.value) {
+      changeFocus(preFocusName);
+    } else {
+      preFocusName = curFocusName;
+      curFocusName = name + "/exitDialog";
     }
-    localStorage.curTab = 0;
-    this.contentData = dataList[this.tabId];
-  },
-  mounted() {},
-  beforeUnmount() {},
+  }
+  return true;
+};
+
+let changeFocus = (name) => {
+  preFocusName = curFocusName;
+  curFocusName = name;
+  focusHub.setFocus(name);
+};
+
+let onTabEdge = (edgeInfo) => {
+  if (edgeInfo.direction === EdgeDirection.bottom) {
+    changeFocus(name + "/bodyFrame");
+  }
+};
+
+let onContentEdge = (edgeInfo) => {
+  if (edgeInfo.direction === EdgeDirection.top) {
+    changeFocus(name + "/tabFrame");
+  }
 };
+
+let tabItemFocus = (data) => {
+  if (data.id != tabId.value) {
+    tabId.value = data.id;
+    contentData.value = dataList[data.id];
+  }
+};
+
+let onDialogAction = (msg) => {
+  showExitDialog.value = false;
+  changeFocus(preFocusName);
+  switch (msg) {
+    case "ok":
+      jJsvRuntimeBridge.closePage();
+      // if (!window.JsView) {
+      //   // 浏览器调试
+      //   window.location.href = "about:blank";
+      // }
+      break;
+    case "back":
+    case "cancel":
+      break;
+  }
+};
+
+// keep-alive后 router 返回本页面时要激活一下focus
+onActivated(() => {
+  onFocus();
+});
 </script>
 
 <template>
@@ -132,7 +121,6 @@ export default {
 
     <jsv-focus-block
       autoFocus
-      ref="rootNode"
       :onAction="{
         onKeyDown: onKeyDown,
         onFocus: onFocus,
@@ -174,7 +162,6 @@ export default {
 .rootSize {
   width: 1920;
   height: 1080;
-  background-color: #334c4c;
 }
 
 .address {

package/samples/FilterDemo/App.vue

@@ -6,7 +6,7 @@
  * @Description: file content
 -->
 <script setup>
-import { ref, reactive, onMounted } from "vue";
+import { ref, shallowRef, reactive, onMounted } from "vue";
 import { useRouter } from "vue-router";
 import { jJsvRuntimeBridge, JsvFilterView } from "jsview";
 import sample from "../assets/jpegDemo.jpeg";

package/samples/FlipCard/App.vue

@@ -1,6 +1,6 @@
 <script setup>
 import { useRouter } from "vue-router";
-import { ref } from "vue";
+import { ref, shallowRef } from "vue";
 import { HORIZONTAL, MetroWidget } from "jsview";
 import FlipCard from "./FlipCard.vue";
 import { data } from "./data.js";
@@ -8,7 +8,7 @@ import redEgg from "./assets/red_egg.png";
 import blueEgg from "./assets/blue_egg.png";
 
 const name = "/flipCard";
-const focusNode = ref(null);
+const focusNode = shallowRef(null);
 const router = useRouter();
 
 const onKeyDown = (ev) => {

package/samples/FlipCard/FlipCard.vue

@@ -1,5 +1,5 @@
 <script setup>
-import { ref } from "vue";
+import { ref, shallowRef } from "vue";
 const props = defineProps({
   initFlipped: Boolean,
   width: Number,
@@ -18,7 +18,7 @@ let flipAnim = ref("");
 let flipped = ref(props.initFlipped);
 let focused = ref(false);
 let keyLocked = false;
-let focusNode = ref(null);
+let focusNode = shallowRef(null);
 
 const onFocus = () => {
   focused.value = true;
@@ -65,7 +65,7 @@ props.onAction.register("onClick", onClick);
           transformStyle: 'preserve-3d',
           backgroundColor: '#FFFF00',
         }"
-        :onAnimationEnd="onFlipped"
+        @animationend="onFlipped"
       >
         <div
           :style="{

package/samples/GridDemo/App.vue

@@ -7,15 +7,15 @@
 -->
 <script setup>
 import { jJsvRuntimeBridge, JsvGrid, LineType, EdgeDirection } from "jsview";
-import { reactive, ref, onMounted } from "vue";
+import { reactive, ref, shallowRef, onMounted } from "vue";
 import { useRouter } from "vue-router";
 import ItemVue from "./Item.vue";
 import FocusItem from "./FocusItem.vue";
 const lineType = new LineType(1, 3);
 const name1 = "updatePage1";
 const name2 = "updatePage2";
-const widget1 = ref(null);
-const widget2 = ref(null);
+const widget1 = shallowRef(null);
+const widget2 = shallowRef(null);
 const router = useRouter();
 const _provideData1 = () => {
   let data = [];

package/samples/GridDemo/ButtonBlock.vue

@@ -6,7 +6,7 @@
  * @Description: file content
 -->
 <script setup>
-import { ref } from "vue";
+import { ref, shallowRef } from "vue";
 const props = defineProps({
   userData: Object,
   name: String,
@@ -15,7 +15,7 @@ const props = defineProps({
 let focusIndex = ref(0);
 let focused = ref(false);
 let divNumber = new Array(25);
-let focusBlock = ref(null);
+let focusBlock = shallowRef(null);
 
 const _onFocus = () => {
   console.log("button onfocus", props.userData);

package/samples/GridDemo/FocusItem.vue

@@ -7,7 +7,7 @@
 -->
 <script setup>
 import ButtonBlock from "./ButtonBlock.vue";
-import { ref } from "vue";
+import { ref, shallowRef } from "vue";
 
 const props = defineProps({
   userData: Object,
@@ -16,7 +16,7 @@ const props = defineProps({
 });
 const focused = ref(false);
 const divNumber = new Array(50);
-const button = ref(null);
+const button = shallowRef(null);
 const onFocus = () => {
   button.value
     .getFocusBlock()

package/samples/GridDemo/Item.vue

@@ -6,7 +6,7 @@
  * @Description: file content
 -->
 <script setup>
-import { ref, onUpdated, onMounted } from "vue";
+import { ref, shallowRef, onUpdated, onMounted } from "vue";
 
 const props = defineProps({
   userData: Object,

package/samples/HashHistory/App.vue

@@ -1,16 +1,23 @@
+<script>
+import { router, routeList } from "./router.js";
+export default {
+  Router: router,
+};
+</script>
+
 <script setup>
 import { jJsvRuntimeBridge } from "jsview";
 import { router, routeList } from "./router.js";
 import { useRouter, useRoute } from "vue-router";
-import { onMounted, ref } from "vue";
+import { onMounted, ref, shallowRef } from "vue";
 
 const props = defineProps({
   routePath: String,
 });
 
 const displayUrl = ref("");
-let topRef = ref(null);
-let routePage = ref(null);
+let topRef = shallowRef(null);
+let routePage = shallowRef(null);
 let currentRouter;
 if (props.routePath) {
   const currentRoute = useRoute();

package/samples/HashHistory/components/Item.vue

@@ -1,5 +1,5 @@
 <script setup>
-import { ref } from "vue";
+import { ref, shallowRef } from "vue";
 const props = defineProps({
   style: Object,
   name: String,

package/samples/ImpactStop/App.vue

@@ -6,6 +6,7 @@
  * @Description: file content
 -->
 <script setup>
+import { jJsvRuntimeBridge } from "@shijiu/jsview-vue/utils/JsViewVueTools/JsvRuntimeBridge";
 import {
   JsvActorMoveControl,
   JsvActorMove,
@@ -13,7 +14,7 @@ import {
   createImpactCallback,
   createImpactAutoFroze,
 } from "jsview";
-import { ref, computed, onMounted, onBeforeUnmount } from "vue";
+import { ref, shallowRef, computed, onMounted, onBeforeUnmount } from "vue";
 import { useRouter } from "vue-router";
 const router = useRouter();
 const CONST_BOARD_LEFT = 0;
@@ -25,12 +26,13 @@ const CONST_BOX_HEIGHT = 30;
 
 const horizontalControl = new JsvActorMoveControl();
 const verticalControl = new JsvActorMoveControl();
-const boxLeft = ref(null);
-const boxMid = ref(null);
-const boxRight = ref(null);
-const actorVertical = { current: null };
-const actorHorizontal = { current: null };
-const actor = ref(null);
+const boxLeft = shallowRef(null);
+const boxMid = shallowRef(null);
+const boxRight = shallowRef(null);
+const actor = shallowRef(null);
+
+let actorVertical = shallowRef(null);
+let actorHorizontal = shallowRef(null);
 
 let viewsAutoFroze = null;
 let sensorList = [];
@@ -195,7 +197,7 @@ onMounted(() => {
 
   /* 将碰撞发生后要停止动画的元素打包 */
   viewsAutoFroze = createImpactAutoFroze(
-    [actorVertical.current, actorHorizontal.current],
+    [actorVertical.value.mainDiv, actorHorizontal.value.mainDiv],
     null
   ); // 此句柄最好保留，未来可以通过此句柄统一进行views list更新
 
@@ -236,6 +238,8 @@ onMounted(() => {
   );
 
   reset();
+
+  jJsvRuntimeBridge.notifyPageLoaded();
 });
 
 onBeforeUnmount(() => {
@@ -379,12 +383,12 @@ onBeforeUnmount(() => {
     <div key="actor" :style="{ top: 520 - CONST_BOX_HEIGHT - 2, left: 40 }">
       <jsv-actor-move
         key="horizontal"
-        :refDefine="actorHorizontal"
+        ref="actorHorizontal"
         :control="horizontalControl"
       >
         <jsv-actor-move
           key="vertical"
-          :refDefine="actorVertical"
+          ref="actorVertical"
           :control="verticalControl"
         >
           <div
@@ -432,4 +436,4 @@ onBeforeUnmount(() => {
   text-overflow: ellipsis;
   text-align: center;
 }
-</style>
+</style>

package/samples/Input/InputPanel.vue

@@ -8,7 +8,7 @@
 <script>
 import FullKeyboard from "./FullKeyboard.vue";
 import { EdgeDirection, JsvInput, useFocusHub } from "jsview";
-import { ref } from "vue";
+import { ref, shallowRef } from "vue";
 
 const blurColor = "#AAAAAA";
 const focusColor = "#FFFF00";

package/samples/LongImage/Button.vue

@@ -6,7 +6,7 @@
  * @Description: file content
 -->
 <script setup>
-import { ref } from "vue";
+import { ref, shallowRef } from "vue";
 import { HORIZONTAL, MetroWidget, EdgeDirection, useFocusHub } from "jsview";
 import ButtonItem from "./ButtonItem.vue";
 

package/samples/LongImage/ButtonItem.vue

@@ -6,7 +6,7 @@
  * @Description: file content
 -->
 <script setup>
-import { ref } from "vue";
+import { ref, shallowRef } from "vue";
 
 const props = defineProps({
   data: Object,

package/samples/LongImage/LongImageScroll.vue

@@ -1,6 +1,6 @@
 <script setup>
 import Scroll from "./Scroll.vue";
-import { ref, onMounted } from "vue";
+import { ref, shallowRef, onMounted } from "vue";
 import { useFocusHub } from "jsview";
 
 const props = defineProps({
@@ -12,7 +12,7 @@ const props = defineProps({
 });
 
 const focusHub = useFocusHub();
-const element = ref(null);
+const element = shallowRef(null);
 const scrollY = ref(0);
 const textY = ref(0);
 const onAction = {

package/samples/LongText/App.vue

@@ -27,7 +27,7 @@
 import LongTextScroll from "./LongTextScroll.vue";
 import Button from "./Button.vue";
 import { jJsvRuntimeBridge } from "jsview";
-import { onMounted, ref } from "vue";
+import { onMounted, ref, shallowRef } from "vue";
 import { useRouter } from "vue-router";
 
 const router = useRouter();

package/samples/LongText/Button.vue

@@ -1,5 +1,5 @@
 <script setup>
-import { ref } from "vue";
+import { ref, shallowRef } from "vue";
 import { HORIZONTAL, MetroWidget, EdgeDirection, useFocusHub } from "jsview";
 import ButtonItem from "./ButtonItem.vue";
 

package/samples/LongText/ButtonItem.vue

@@ -6,7 +6,7 @@
  * @Description: file content
 -->
 <script setup>
-import { ref } from "vue";
+import { ref, shallowRef } from "vue";
 
 const props = defineProps({
   data: Object,

package/samples/LongText/LongTextScroll.vue

@@ -1,6 +1,6 @@
 <script setup>
 import Scroll from "./Scroll.vue";
-import { ref, onMounted } from "vue";
+import { ref, shallowRef, onMounted } from "vue";
 
 const props = defineProps({
   step: Number,
@@ -10,8 +10,8 @@ const props = defineProps({
   textStyle: Object,
 });
 
-const rootRef = ref(null);
-const element = ref(null);
+const rootRef = shallowRef(null);
+const element = shallowRef(null);
 const scrollY = ref(0);
 const textY = ref(0);
 

package/samples/Marquee/longText.js

@@ -2,13 +2,13 @@
  * @Author: ChenChanghua
  * @Date: 2022-11-10 15:08:28
  * @LastEditors: ChenChanghua
- * @LastEditTime: 2022-11-10 15:21:11
+ * @LastEditTime: 2022-11-21 17:47:57
  * @Description: file content
  */
 const longLongText =
   "艾因小萌班用户服务协议及隐私权保护政策特别提示：欢迎您使用“艾因小萌班”。本用户服务协议及隐私权保护政策（下称“本协议”）是您与运营方之间订立的具有法律效力的合同。请您仔细阅读并充分理解本协议各条款内容，特别是涉及免除或者限制责任的条款、权利许可和信息使用的条款、同意开通和使用特殊单项服务的条款、法律适用和争议解决条款等。其中，免除或者限制责任条款等重要内容可能以下划线/加粗进行提示您，您应重点阅读。未成年人用户请在法定监护人陪同下仔细阅读并充分理解本协议，并征得法定监护人的同意后使用“艾因小萌班”。除非您完全接受本协议的全部内容，否则您无权下载、注册、登录、使用（以下统称“使用”）“艾因小萌班”，或者通过任何方式使用“艾因小萌班”服务，或者获得“艾因小萌班”提供的任何服务（本协议中统称“使用”）。若您使用“艾因小萌班”及相关服务，则视为您已充分理解本协议并承诺作为本协议的一方当事人接受协议的约束，您不得以未仔细阅读、未充分理解等理由拒绝接受本协议的约束。本协议内容或不能保证完全符合未来业务发展需求。为此，您同意运营方保留随时修改本协议的权利。本协议条款修改后，运营方将及时公布，您同意予以密切关注。如果您继续使用艾因小萌班，即视为您完全接受修改后的协议。如果您不接受修改后的协议，请立即停止使用艾因小萌班。关于艾因小萌班的使用您使用“艾因小萌班”及相关服务，登录后，系统将为您自动匹配一个不可更改的用户ID,您应妥善保管该用户ID并对以您用户ID所进行的所有活动负法律责任。";
 
 const rtlLongLongText =
-  "مرحبا بالعالم مرحبا بالعالم مرحبا بالعالم مرحبا بالعالم مرحبا بالعالم مرحبا بالعالم مرحبا بالعالم مرحبا بالعالم مرحبا بالعالم مرحبا بالعالم مرحبا بالعالم مرحبا بالعالم مرحبا بالعالم مرحبا بالعالم مرحبا بالعالم مرحبا بالعالم مرحبا بالعالم مرحبا بالعالم مرحبا بالعالم مرحبا بالعالم مرحبا بالعالم مرحبا بالعالم مرحبا بالعالم مرحبا بالعالم مرحبا بالعالم مرحبا بالعالم مرحبا بالعالم مرحبا بالعالم مرحبا بالعالم مرحبا بالعالم مرحبا بالعالم مرحبا بالعالم مرحبا بالعالم مرحبا بالعالم مرحبا بالعالم مرحبا بالعالم مرحبا بالعالم مرحبا بالعالم مرحبا بالعالم مرحبا بالعالم مرحبا بالعالم مرحبا بالعالم مرحبا بالعالم مرحبا بالعالم مرحبا بالعالم مرحبا بالعالم مرحبا بالعالم مرحبا بالعالم مرحبا بالعالم مرحبا بالعالم مرحبا بالعالم مرحبا بالعالم مرحبا بالعالم مرحبا بالعالم مرحبا بالعالم مرحبا بالعالم مرحبا بالعالم مرحبا بالعالم مرحبا بالعالم مرحبا بالعالم مرحبا بالعالم مرحبا بالعالم مرحبا بالعالم مرحبا بالعالم مرحبا بالعالم مرحبا بالعالم مرحبا بالعالم مرحبا بالعالم مرحبا بالعالم مرحبا بالعالم مرحبا بالعالم مرحبا بالعالم مرحبا بالعالم مرحبا بالعالم مرحبا بالعالم مرحبا بالعالم مرحبا بالعالم مرحبا بالعالم مرحبا بالعالم مرحبا بالعالم مرحبا بالعالم مرحبا بالعالم مرحبا بالعالم مرحبا بالعالم مرحبا بالعالم مرحبا بالعالم مرحبا بالعالم مرحبا بالعالم مرحبا بالعالم مرحبا بالعالم ";
+  "نحن لا نضع أي فرضيات مسبقة عن التكنولوجيا الأخرى التي تستخدمها، فلهذا يمكنك تطوير ميزات و إضافات باستخدام دون الحاجة الى إعادة كتابة أي شيفرة مكتوبة سابقاً الواجهات المُعرّفة (التصريحية)، تجعل الشيفرة الخاصة بالبرنامج سهلة التوقع عند تنفيذها و سهلة التصحيح في حالة وجود أخطاء للغاية، ﻻ يجب عليك سوى أن تصمم واجهة بسيطة لكل حالة من حالات التطبيق و بعدها React يتكفل وبفاعلية بتحديث و إعادة رسم المكّون المعني بالتحديث فقط عند تغيُّر البيانات تُدير حالتها الخاصّة، ومن ثمّ تُركِّب هذه المكوّنات مع بعضها لإنشاء واجهات مستخدم مُعقّدة نحن لا نضع أي فرضيات مسبقة عن التكنولوجيا الأخرى التي تستخدمها، فلهذا يمكنك تطوير ميزات و إضافات باستخدام";
 
 export { longLongText, rtlLongLongText };

package/samples/MetroWidgetDemos/Advanced/ButtonItem.vue

@@ -2,16 +2,16 @@
  * @Author: ChenChanghua
  * @Date: 2022-07-11 13:26:24
  * @LastEditors: ChenChanghua
- * @LastEditTime: 2022-11-02 15:37:33
+ * @LastEditTime: 2022-12-02 16:10:16
  * @Description: file content
 -->
 <script setup>
-import { ref } from "vue";
+import { ref, shallowRef } from "vue";
 import { useFocusHub } from "jsview";
 
 const props = defineProps({
   data: Object,
-  query: String,
+  query: Object,
   onAction: Object,
   onItemEdge: Function,
 });
@@ -19,7 +19,7 @@ const focusHub = useFocusHub();
 
 let focusIndex = ref(0);
 let focused = ref(false);
-let focusBlock = ref(null);
+let focusBlock = shallowRef(null);
 
 const onFocus = () => {
   //onFocus时, 获得焦点, 以处理自己内部的焦点逻辑

package/samples/MetroWidgetDemos/Advanced/widgets/Item.vue

@@ -2,7 +2,7 @@
  * @Author: ChenChanghua
  * @Date: 2022-11-01 15:30:14
  * @LastEditors: ChenChanghua
- * @LastEditTime: 2022-11-02 15:39:17
+ * @LastEditTime: 2022-12-02 16:11:54
  * @Description: file content
 -->
 <!--
@@ -13,7 +13,7 @@
  * @Description: file content
 -->
 <script setup>
-import { ref, inject } from "vue";
+import { ref, shallowRef, inject } from "vue";
 
 const props = defineProps({
   data: Object,
@@ -21,7 +21,7 @@ const props = defineProps({
   onAction: Object,
 });
 
-const divRef = ref(null);
+const divRef = shallowRef(null);
 const focused = ref(false);
 
 const focusSize = inject("focusSize");
@@ -74,7 +74,6 @@ props.onAction.register("onClick", onClick);
         color: '#FFFFFF',
         backgroundColor: data.color,
         borderRadius: '10px',
-        animation: animation,
       }"
     >
       {{ data.content }}

package/samples/MetroWidgetDemos/Advanced/widgets/WidgetItem.vue

@@ -1,7 +1,7 @@
 
 <script setup>
 import { HORIZONTAL, MetroWidget, useFocusHub } from "jsview";
-import { ref } from "vue";
+import { ref, shallowRef } from "vue";
 import Item from "./Item.vue";
 
 const props = defineProps({
@@ -11,7 +11,7 @@ const props = defineProps({
   onAction: Object,
 });
 const focusHub = useFocusHub();
-const mwRef = ref(null);
+const mwRef = shallowRef(null);
 
 const measures = (item) => {
   return item;
@@ -78,7 +78,6 @@ props.onAction.register("onBlur", onBlur);
       bottom: 10,
     }"
     :measures="measures"
-    :slideSetting="seamlessSlide"
     :onEdge="onItemEdge"
     :sendFocusRectEvent="true"
   >

package/samples/MetroWidgetDemos/Advanced/widgets/Widgets.vue

@@ -16,7 +16,7 @@ import {
 import { advanceMetroWidget } from "../../data";
 import WidgetItem from "../widgets/WidgetItem.vue";
 import focusImg from "./focus1.png";
-import { ref, reactive, provide } from "vue";
+import { ref, shallowRef, reactive, provide } from "vue";
 
 const focusHub = useFocusHub();
 const showFocus = ref(false);