@shijiu/jsview-vue 0.9.246 → 0.9.254

package/samples/HashHistory/App.vue

@@ -1,124 +1,124 @@
-<script lang="ts">
-import { Options, Vue } from "vue-class-component";
-import { jJsvRuntimeBridge } from "jsview/utils/JsViewVueTools/JsvRuntimeBridge";
-import { router, routeList } from './router.js'
-import { useRouter, useRoute, Router } from 'vue-router'
-
-@Options({
-  props: {
-    routePath: String
-  },
-})
-class App extends Vue {
-  constructor(props: any) {
-    super(props)
-
-    let currentRouter: Router;
-
-    // props.routePath在DemoHomepage中被设置, 此处作为内嵌router使用.
-    // 此时已经有router, 则作为children动态添加到当前route
-    if(props.routePath) {
-      const currentRoute = useRoute()
-      currentRouter = useRouter()
-
-      let redirectPath; // 自动跳转路径
-      for(const route of routeList) {
-        if(route.path === "/") { // 不需要添加home
-          redirectPath = route.redirect;
-          continue;
-        }
-
-        const subRoute = {...route, path: route.path.substring(1)} // 去掉字符'/'
-        currentRouter.addRoute(currentRoute.name as string, subRoute)
-      }
-
-      currentRouter.replace(props.routePath + redirectPath) // 自动跳转到redirectPath
-    } else { // 作为全局router使用
-      currentRouter = App.Router;
-    }
-
-    this.watchRouterChanged(currentRouter);
-  }
-
-  // Override
-  mounted() {
-    // 调试接口，对接JSCenter平台去掉启动图的处理
-    jJsvRuntimeBridge.notifyPageLoaded();
-  }
-
-  private onRequestFocus(branchName: string) {
-    this.topRef.findBlockByname(branchName)?.requestFocus();
-  }
-
-  private watchRouterChanged(route: Router) {
-    route.afterEach(() => {
-      this.displayUrl = window.location.href;
-    })
-  }
-
-  private onKeyDown(event: any) {
-    return this.routePage?.onKeyDown(event);
-  }
-
-  private topRef!: any;
-  private displayUrl: string = "";
-  private routePage: any = null;
-
-  static Router: Router = router;
-}
-
-export default App;
-</script>
-
-<template>
-<div class="root">
-  <div class="address">
-      当前URL: {{ displayUrl }}
-  </div>
-  <div class="split" />
-    <jsv-focus-block ref="topRef">
-      <!-- 这种router-view的写法可以获取到component的ref，vue标准写法 -->
-      <router-view v-slot="{ Component }">
-        <component :is="Component"
-            ref="routePage"
-            class="router"
-            @requestFocus="onRequestFocus"
-        />
-      </router-view>
-    </jsv-focus-block>
-</div>
-</template>
-
-<style scoped>
-.root {
-  left: 0;
-  top: 0;
-  width: 1280;
-  height: 1080;
-  background-color: rgb(222,211,140)
-}
-
-.address {
-  left: 40;
-  top: 40;
-  width: 1200;
-  height: 200;
-  font-size: 20;
-}
-
-.split {
-  left: 40;
-  top: 150;
-  width: 1200;
-  height: 3;
-  background-color: #00F000;
-}
-
-.router {
-  left:0;
-  top:150;
-  width: 1920;
-  height: 930;
-  overflow: hidden;
-}
-</style>
+<script lang="ts">
+import { Options, Vue } from "vue-class-component";
+import { jJsvRuntimeBridge } from "jsview/utils/JsViewVueTools/JsvRuntimeBridge";
+import { router, routeList } from './router.js'
+import { useRouter, useRoute, Router } from 'vue-router'
+
+@Options({
+  props: {
+    routePath: String
+  },
+})
+class App extends Vue {
+  constructor(props: any) {
+    super(props)
+
+    let currentRouter: Router;
+
+    // props.routePath在DemoHomepage中被设置, 此处作为内嵌router使用.
+    // 此时已经有router, 则作为children动态添加到当前route
+    if(props.routePath) {
+      const currentRoute = useRoute()
+      currentRouter = useRouter()
+
+      let redirectPath; // 自动跳转路径
+      for(const route of routeList) {
+        if(route.path === "/") { // 不需要添加home
+          redirectPath = route.redirect;
+          continue;
+        }
+
+        const subRoute = {...route, path: route.path.substring(1)} // 去掉字符'/'
+        currentRouter.addRoute(currentRoute.name as string, subRoute)
+      }
+
+      currentRouter.replace(props.routePath + redirectPath) // 自动跳转到redirectPath
+    } else { // 作为全局router使用
+      currentRouter = App.Router;
+    }
+
+    this.watchRouterChanged(currentRouter);
+  }
+
+  // Override
+  mounted() {
+    // 调试接口，对接JSCenter平台去掉启动图的处理
+    jJsvRuntimeBridge.notifyPageLoaded();
+  }
+
+  private onRequestFocus(branchName: string) {
+    this.topRef.findBlockByname(branchName)?.requestFocus();
+  }
+
+  private watchRouterChanged(route: Router) {
+    route.afterEach(() => {
+      this.displayUrl = window.location.href;
+    })
+  }
+
+  private onKeyDown(event: any) {
+    return this.routePage?.onKeyDown(event);
+  }
+
+  private topRef!: any;
+  private displayUrl: string = "";
+  private routePage: any = null;
+
+  static Router: Router = router;
+}
+
+export default App;
+</script>
+
+<template>
+<div class="root">
+  <div class="address">
+      当前URL: {{ displayUrl }}
+  </div>
+  <div class="split" />
+    <jsv-focus-block ref="topRef">
+      <!-- 这种router-view的写法可以获取到component的ref，vue标准写法 -->
+      <router-view v-slot="{ Component }">
+        <component :is="Component"
+            ref="routePage"
+            class="router"
+            @requestFocus="onRequestFocus"
+        />
+      </router-view>
+    </jsv-focus-block>
+</div>
+</template>
+
+<style scoped>
+.root {
+  left: 0;
+  top: 0;
+  width: 1280;
+  height: 1080;
+  background-color: rgb(222,211,140)
+}
+
+.address {
+  left: 40;
+  top: 40;
+  width: 1200;
+  height: 200;
+  font-size: 20;
+}
+
+.split {
+  left: 40;
+  top: 150;
+  width: 1200;
+  height: 3;
+  background-color: #00F000;
+}
+
+.router {
+  left:0;
+  top:150;
+  width: 1920;
+  height: 930;
+  overflow: hidden;
+}
+</style>

package/samples/HashHistory/components/HorizontalButtonList.vue

@@ -1,114 +1,114 @@
-<script lang="ts">
-import { JsvFocusEvent } from "jsview/utils/JsViewEngineWidget";
-import { Options, Vue } from "vue-class-component";
-import Item from "./Item.vue";
-
-@Options({
-  props: {
-    style: Object,
-    buttonConfig: Object,
-    onButtonClick: Function,
-    onBack: Function,
-  },
-  components: {
-    Item,
-  }
-})
-
-
-class HorizontalButtonList extends Vue {
-  constructor(props: object) {
-    super(props);
-
-    this.listSize = this.computeSize(props);
-  }
-
-  private computeSize(props: any) : object {
-    let listLeft = 0;
-    const listWidth = (this.buttonWidth + this.buttonGap) * props.buttonConfig.length;
-
-    // 根据maxWidth，计算buttons的左边位置
-    const widthCenter = listWidth - this.buttonGap; // 减去最后一个元素的gap
-    if (widthCenter < this.maxWidth) {
-      listLeft = Math.floor((this.maxWidth - widthCenter) / 2);
-    }
-
-    let listSize = {
-      left: listLeft,
-      width: listWidth,
-      height: this.buttonHeight,
-    };
-
-    return listSize;
-  }
-
-  private onKeyDown(ev: JsvFocusEvent) {
-    if(ev.keyCode === 13) { // Enter
-      this.onButtonClick?.(this.focusedItemIndex);
-      return true;
-    } else if(ev.keyCode == 8 || ev.keyCode == 27 || ev.keyCode == 10000) { // 8:Backspace, 27:Escape, 10000:盒子返回键
-      this.onBack?.();
-      return true;
-    }
-
-    let changeFocusTo = -1;
-    switch (ev.keyCode) {
-      case 37: // Left
-        changeFocusTo = (this.focusedItemIndex - 1 + this.buttonConfig.length) % this.buttonConfig.length;
-        break;
-      case 39: // Right
-        changeFocusTo = (this.focusedItemIndex + 1) % this.buttonConfig.length;
-        break;
-      default:
-        break;
-    }
-    if (changeFocusTo >= 0) {
-      ev.ownerNode.findBlockByName(changeFocusTo.toString()).requestFocus();
-      this.focusedItemIndex = changeFocusTo;
-      return true;
-    }
-
-    return false;
-  }
-
-  private listSize: object;
-
-  private focusedItemIndex = 0;
-
-  private readonly buttonConfig!: any;
-  private readonly onButtonClick?: Function;
-  private readonly onBack?: Function;
-
-  private readonly maxWidth: number = 1280;
-  private readonly listPadding: number = 10;
-  private readonly buttonWidth: number = 400;
-  private readonly buttonHeight: number = 80;
-  private readonly buttonGap: number = 50;
-}
-
-export default HorizontalButtonList;
-</script>
-
-<template>
-<div :style="style">
-  <jsv-focus-block
-      :style="{
-        left: listSize.left,
-        width: listSize.width + listPadding * 2,
-        height: listSize.height + listPadding * 2,
-      }"
-      :onKeyDown="onKeyDown"
-  >
-    <Item v-for="(item,index) in buttonConfig" :key="index"
-        :style="{ left: (buttonWidth+10)*index, width:buttonWidth, height:buttonHeight }"
-        :name="index.toString()"
-        :autoFocus="index === 0"
-    >
-      {{ item.name }}
-    </Item>
-  </jsv-focus-block>
-</div>
-</template>
-
-<style>
+<script lang="ts">
+import { JsvFocusEvent } from "jsview/utils/JsViewEngineWidget";
+import { Options, Vue } from "vue-class-component";
+import Item from "./Item.vue";
+
+@Options({
+  props: {
+    style: Object,
+    buttonConfig: Object,
+    onButtonClick: Function,
+    onBack: Function,
+  },
+  components: {
+    Item,
+  }
+})
+
+
+class HorizontalButtonList extends Vue {
+  constructor(props: object) {
+    super(props);
+
+    this.listSize = this.computeSize(props);
+  }
+
+  private computeSize(props: any) : object {
+    let listLeft = 0;
+    const listWidth = (this.buttonWidth + this.buttonGap) * props.buttonConfig.length;
+
+    // 根据maxWidth，计算buttons的左边位置
+    const widthCenter = listWidth - this.buttonGap; // 减去最后一个元素的gap
+    if (widthCenter < this.maxWidth) {
+      listLeft = Math.floor((this.maxWidth - widthCenter) / 2);
+    }
+
+    let listSize = {
+      left: listLeft,
+      width: listWidth,
+      height: this.buttonHeight,
+    };
+
+    return listSize;
+  }
+
+  private onKeyDown(ev: JsvFocusEvent) {
+    if(ev.keyCode === 13) { // Enter
+      this.onButtonClick?.(this.focusedItemIndex);
+      return true;
+    } else if(ev.keyCode == 8 || ev.keyCode == 27 || ev.keyCode == 10000) { // 8:Backspace, 27:Escape, 10000:盒子返回键
+      this.onBack?.();
+      return true;
+    }
+
+    let changeFocusTo = -1;
+    switch (ev.keyCode) {
+      case 37: // Left
+        changeFocusTo = (this.focusedItemIndex - 1 + this.buttonConfig.length) % this.buttonConfig.length;
+        break;
+      case 39: // Right
+        changeFocusTo = (this.focusedItemIndex + 1) % this.buttonConfig.length;
+        break;
+      default:
+        break;
+    }
+    if (changeFocusTo >= 0) {
+      ev.ownerNode.findBlockByName(changeFocusTo.toString()).requestFocus();
+      this.focusedItemIndex = changeFocusTo;
+      return true;
+    }
+
+    return false;
+  }
+
+  private listSize: object;
+
+  private focusedItemIndex = 0;
+
+  private readonly buttonConfig!: any;
+  private readonly onButtonClick?: Function;
+  private readonly onBack?: Function;
+
+  private readonly maxWidth: number = 1280;
+  private readonly listPadding: number = 10;
+  private readonly buttonWidth: number = 400;
+  private readonly buttonHeight: number = 80;
+  private readonly buttonGap: number = 50;
+}
+
+export default HorizontalButtonList;
+</script>
+
+<template>
+<div :style="style">
+  <jsv-focus-block
+      :style="{
+        left: listSize.left,
+        width: listSize.width + listPadding * 2,
+        height: listSize.height + listPadding * 2,
+      }"
+      :onKeyDown="onKeyDown"
+  >
+    <Item v-for="(item,index) in buttonConfig" :key="index"
+        :style="{ left: (buttonWidth+10)*index, width:buttonWidth, height:buttonHeight }"
+        :name="index.toString()"
+        :autoFocus="index === 0"
+    >
+      {{ item.name }}
+    </Item>
+  </jsv-focus-block>
+</div>
+</template>
+
+<style>
 </style>

package/samples/HashHistory/components/Item.vue

@@ -1,74 +1,74 @@
-<script lang="ts">
-import { Options, Vue } from "vue-class-component";
-
-@Options({
-  props: {
-    style: Object,
-    name: String,
-    autoFocus: Boolean
-  },
-})
-
-class Item extends Vue {
-  constructor(props: object) {
-    super(props);
-  }
-
-  onFocus() {
-    this.hasFocused = true;
-  }
-
-  onBlur() {
-    this.hasFocused = false;
-  }
-
-  getFocusStyle() {
-    return {
-      width: this.style.width + 10,
-      height: this.style.height + 10,
-    }
-  }
-
-  getItemStyle() {
-    return {
-      width: this.style.width,
-      height: this.style.height,
-      backgroundColor: '#0FF000',
-      lineHeight: this.style.height,
-      fontSize: `${Math.floor(this.style.height * 0.55)}px`,
-    }
-  }
-
-  private hasFocused: boolean = false;
-  private style!: any;
-}
-
-export default Item;
-</script>
-
-<template>
-<jsv-focus-block :name="name" :autoFocus="autoFocus?'':undefined"
-  :onFocus="onFocus" :onBlur="onBlur"
->
-  <div :style="style">
-    <div class="focus" :style="getFocusStyle()" v-if="hasFocused" />
-    <div class="item" :style="getItemStyle()">
-      <slot/>
-    </div>
-  </div>
-</jsv-focus-block>
-</template>
-
-<style scoped>
-.focus {
-  top: -5;
-  left: -5;
-  background-color: #0000FF;
-}
-.item {
-  text-align: center;
-  font-size: 30;
-  color: #000000;
-  white-space: nowrap;
-}
+<script lang="ts">
+import { Options, Vue } from "vue-class-component";
+
+@Options({
+  props: {
+    style: Object,
+    name: String,
+    autoFocus: Boolean
+  },
+})
+
+class Item extends Vue {
+  constructor(props: object) {
+    super(props);
+  }
+
+  onFocus() {
+    this.hasFocused = true;
+  }
+
+  onBlur() {
+    this.hasFocused = false;
+  }
+
+  getFocusStyle() {
+    return {
+      width: this.style.width + 10,
+      height: this.style.height + 10,
+    }
+  }
+
+  getItemStyle() {
+    return {
+      width: this.style.width,
+      height: this.style.height,
+      backgroundColor: '#0FF000',
+      lineHeight: this.style.height,
+      fontSize: `${Math.floor(this.style.height * 0.55)}px`,
+    }
+  }
+
+  private hasFocused: boolean = false;
+  private style!: any;
+}
+
+export default Item;
+</script>
+
+<template>
+<jsv-focus-block :name="name" :autoFocus="autoFocus?'':undefined"
+  :onFocus="onFocus" :onBlur="onBlur"
+>
+  <div :style="style">
+    <div class="focus" :style="getFocusStyle()" v-if="hasFocused" />
+    <div class="item" :style="getItemStyle()">
+      <slot/>
+    </div>
+  </div>
+</jsv-focus-block>
+</template>
+
+<style scoped>
+.focus {
+  top: -5;
+  left: -5;
+  background-color: #0000FF;
+}
+.item {
+  text-align: center;
+  font-size: 30;
+  color: #000000;
+  white-space: nowrap;
+}
 </style>

package/samples/HashHistory/router.js

@@ -1,30 +1,30 @@
-import { createRouter }  from "vue-router";
-import { createJsvHashHistory }  from "jsview/utils/JsViewVueTools/JsvHashHistory";
-
-const routeList = [
-  // 功能实例
-  { 
-    name: "Home",
-    path: "/",
-    redirect: "/__MainJsvApp/MainPage", 
-  }, { 
-    name: "MainPage",
-    path: "/__MainJsvApp/MainPage",
-    component: () => import('./views/MainPage')
-  }, { 
-    name: "SubPageFirst",
-    path: "/__MainJsvApp/SubPageFirst",
-    component: () => import('./views/SubPageFirst')
-  }, { 
-    name: "SubPageSecond",
-    path: "/__MainJsvApp/SubPageSecond",
-    component: () => import('./views/SubPageSecond')
-  },
-];
-
-const router = createRouter({
-  history: createJsvHashHistory(),
-  routes: routeList,
-})
-
+import { createRouter }  from "vue-router";
+import { createJsvHashHistory }  from "jsview/utils/JsViewVueTools/JsvHashHistory";
+
+const routeList = [
+  // 功能实例
+  { 
+    name: "Home",
+    path: "/",
+    redirect: "/__MainJsvApp/MainPage", 
+  }, { 
+    name: "MainPage",
+    path: "/__MainJsvApp/MainPage",
+    component: () => import('./views/MainPage')
+  }, { 
+    name: "SubPageFirst",
+    path: "/__MainJsvApp/SubPageFirst",
+    component: () => import('./views/SubPageFirst')
+  }, { 
+    name: "SubPageSecond",
+    path: "/__MainJsvApp/SubPageSecond",
+    component: () => import('./views/SubPageSecond')
+  },
+];
+
+const router = createRouter({
+  history: createJsvHashHistory(),
+  routes: routeList,
+})
+
 export { router, routeList }