@shijiu/jsview-vue 0.9.631 → 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);